Load dependent dropdown on Edit Laravel-CodePudding

How to automatically load or retrieve the subcategory/dependent dropdown based on the selected value of parent dropdown in Edit. If I click the edit, the doctor should instantly load. I've been searching for hours for the solutions please help.

Blade

<select name="clinic_id" data-placeholder="Search" data-allow-clear="true"
    style="width: 100%;" id="load_clinic">
   <option selected="selected"></option>
       @foreach ($clinic as $id => $item)
         <option value="{{ $id }}"
             {{ $schedule->clinic_id == $id ? 'selected' : '' }}>
              {{ $item }}
         </option>
       @endforeach
</select>

<select name="doctor_id" data-placeholder="Search" data-allow-clear="true"
     style="width: 100%;" id="load_doctor">
</select>

Javascript

 $(document).ready(function() {
        $('#load_clinic').on('change', function(e) {
            var clinic_id = e.target.value;
            if (clinic_id) {
                $.ajax({
                    url: "{{ route('getDoctor') }}",
                    type: "POST",
                    data: {
                        clinic_id: clinic_id,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(data) {
                        if (data) {
                            $('#load_doctor').empty();
                            $('#load_doctor').append(
                                '<option value=""> Select Doctor</option>');
                            $.each(data, function(key, value) {
                                $('#load_doctor').append($(
                                    "<option/>", {
                                        value: key,
                                        text: value
                                    }));

                            });
                        } else {
                            $('#load_doctor').empty();
                        }
                    }
                })
            } else {
                $('#load_doctor').empty();
            }
        });
    });

Controller

public function edit($id)
{
    $schedule = Schedule::findOrFail($id);
    $clinic = Clinic::pluck('name', 'id');
    $doctor = Doctor::get()->pluck('full_name', 'id');
    return view('admin.schedule.edit', compact('schedule', 'doctor', 'clinic'));
}

public function getDoctor(Request $request)
{
    $id = $request->clinic_id;
    $doctor = Doctor::where('clinic_id', $id)->get()->pluck('full_name', 'id');
    return response()->json($doctor);
}

CodePudding user response：

You can get initial select options with PHP before resorting to ajax.

Consider using plural nouns when you are using get() and singular when using i.e. first()

Also, consider using @if(condition) @endif instead of ternary operators in blade

This is solution with PHP, if you want to get doctors with AJAX, in addition to onChange listener, you should also call it when page loads,

Controller

public function edit($id)
{
    $schedule = Schedule::findOrFail($id);
    $clinic = Clinic::pluck('name', 'id');
    $doctor = Doctor::where('clinic_id', $schedule->clinic_id)->get();
    return view("admin.schedule.edit", compact('schedule', 'doctor', 'clinic'));
}

Blade

<select name="clinic_id" data-placeholder="Search" data-allow-clear="true"
    style="width: 100%;" id="load_clinic">
   <option selected="selected"></option>
       @foreach ($clinic as $id => $item)
         <option value="{{ $id }}"
             {{ $schedule->clinic_id == $id ? 'selected' : '' }}>
              {{ $item }}
         </option>
       @endforeach
</select>

<select name="doctor_id" data-placeholder="Search" data-allow-clear="true"
     style="width: 100%;" id="load_doctor">
    @foreach($doctor as $item)
        <option value="{{$item->id}}">{{$item->full_name}}</option>
    @endforeach
</select>