In my project i want to create difference admins for colleges ,departments and laboratorys , i u used Ajax for fetching data of admin id depends on the admin type input and i also use a logic in controller as the following in my controller :

    public function store(Request $request)
    {
        $this->validate($request, [
            'name' => 'required',
            'email' => 'required|',
            'password' => 'required',
            'roles' => 'required',
            'admin_type'=>'required',
            'admin_id'=>'required'

            
        ]);
        $adminType = $request->input('admin_type');
        $adminId = $request->input('admin_id');
        $input = $request->all();
        // $input['password'] = Hash::make($input['password']);
    
        $user = User::create($input);
        if ($adminType == 'colleges') {
            $user->colleges()->attach($adminId);
        } else if ($adminType == 'departments') {
            $user->departments()->attach($adminId);
        } else if ($adminType == 'laboratories') {
            $user->laboratories()->attach($adminId);
        }
        $user->assignRole($request->input('roles'));
    
        return redirect()->route('users.index')
                        ->with('success','User created successfully');
    }
 public function getAdminId(Request $request)//for getting admin ids depends on the admin_type
{
    $adminType = $request->admin_type;
    $options = '';

    if ($adminType == 'college') {
        $colleges = College::all();
        foreach ($colleges as $college) {
            $options .= '<option value="'.$college->id.'" id="'.$college->id.'">'.$college->name.'</option>';
         }
         
    } elseif ($adminType == 'department') {
        $departments = Department::all();
        foreach ($departments as $department) {
            $options .= '<option value="'.$department->id.'">'.$department->name.'</option>';
        }
    } elseif ($adminType == 'laboratory') {
        $laboratories = Laboratory::all();
        foreach ($laboratories as $laboratory) {
            $options .= '<option value="'.$laboratory->id.'">'.$laboratory->name.'</option>';
        }
    }

     return '<select name="admin_id" id="admin_id" >'.$options.'</select>';;
}

in my route i have this for Ajax

Route::get('get/admin_id', [App\Http\Controllers\UserController::class, 'getAdminId'])->name('get.admin_id');

in my blade template

@extends('layouts.mainlayout')

@section('content')

<section >
    <div >
        <div >
            <div >
                <div >
                    <div >
                        <div >
                            <div >
                                <h2  >User Registration</h2>
                                @if ($errors->any())
                                <div >
                                    <ul>
                                        @foreach ($errors->all() as $error)
                                            <li>{{ $error }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                                @endif
                                <form method="POST" action="{{ route('users.store') }}">
                                     @csrf
       
                                    <div >
                                         <label for="name">Name:</label>
                                        <input type="text"  placeholder="name" name = "name" />
                                    </div>

                                    <div >
                                        <label for="email">Email:</label>
                                        <input type="email"  id="email" placeholder="email"name = "email">
                                    </div>

                                    <div >
                                         <label for="password">Password:</label>
                                        <input type="password"  id="password" name="password" placeholder="Password">
                                     </div>
                                     <div >
                                     <label for="role">Roles:</label>
                                    <select name="roles[]" id="roles" class= "form-control show-tick ms select2" multiple data-placeholder="Select Roles">
                                    @foreach($roles as $tag)
                                        <option value="{{$tag}}"           
                                        >{{$tag}}</option>
                                        @endforeach
                                    </select>
                                </div>

                                     <div >
                                        <label for="admin_type">Admin Type</label>
                                        <select name="admin_type" id="admin_type" >

                                            <option value="college">College</option>
                                            <option value="department">Department</option>
                                            <option value="laboratory">Laboratory</option>
                                        </select>
                                    </div>

                                     <div >
                                    <label for="admin_id">Admin ID</label>
                                    <select name="admin_id" id="admin_id" >
                                        <option value="">   </option>
                                    </select>
                                </div>
                                   
                                     <div>
                                     <button  onclick="this.form.submit()" type="submit">SUBMIT</button>
                                     </div>
                                     
                                 </form>
                            </div>
                        </div>    
                    </div>
                </div>
            </div>
        </div>
    </div>
    
</section>
@endsection
@section('scripts')
<script>
$(document).ready(function(){
    $('#admin_type').on('change', function(){
        var adminType = $(this).val();
        $.ajax({
            type:'GET',
            url: '{{ route('get.admin_id') }}',
            data: { admin_type: adminType },
            success:function(data){
                console.log(data);
                $('#admin_id').append(data);
                

               
                
            }
        });
        
    });
});
</script>




@endsection

and in console l got what i want like this "habtewolddf" but in the blade page the options are not coming, I dont know why it is not working any one who can help me please please???

CodePudding user response：

You are appending select with another select. Try change <select> in blade file by <div> or even better - instead of .append() use .replaceWith() :

$('#admin_type').on('change', function(){
    var adminType = $(this).val();
    $.ajax({
        type:'GET',
        url: '{{ route('get.admin_id') }}',
        data: { admin_type: adminType },
        success:function(data){
            console.log(data);
            $('#admin_id').replaceWith(data); // Here
        }
    });
});