cac

Jquery Ajax Dependent Select

Posted 4 months ago by cac

I am trying to update the options of a select when some other select suffer the change event. Here is what I wrote. I dont understand why I am getting error 500. Can anyone please help me?

view:

<div class="form-group row">
    <label for="occupation_area_id"
                             class="col-4 col-form-label text-md-right">{{ __('labels.Occupation Area') }}
        *</label>
                            <div class="col-6">
                                <select required
                                        class="form-control{{ $errors->has('occupation_area_id') ? ' is-invalid' : '' }}"
                                        name="occupation_area_id"
                                        id="occupation_area_id">
                                    <option value="" selected>{{__('labels.Select')}}</option>
                                    @foreach($occupationAreas as $occupationArea)
                                        <option value="{{$occupationArea->id}}">{{$occupationArea->name}}</option>
                                    @endforeach
                                </select>
                                @if ($errors->has('occupation_area_id'))
                                    <span class="invalid-feedback" role="alert">
                                <strong>{{ $errors->first('occupation_area_id') }}</strong>
                             </span>
                                @endif
                            </div>
                        </div>

                        <div class="form-group row">
                            <label for="specialty_id"
                                   class="col-4 col-form-label text-md-right">{{ __('labels.Specialties') }}
                                *</label>
                            <div class="col-6">
                                <select required
                                        multiple="multiple"
                                        class="form-control
                                        form-control{{ $errors->has('specialty_id') ? ' is-invalid' : '' }}"
                                        name="specialty_id"
                                        id="specialty_id">
                                    <option value="" selected>{{__('labels.Select')}}</option>

                                </select>
                                @if ($errors->has('specialty_id'))
                                    <span class="invalid-feedback" role="alert">
                                <strong>{{ $errors->first('specialty_id') }}</strong>
                             </span>
                                @endif
                            </div>
                        </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $('#occupation_area_id').on('change', function () {
            var occupationAreaId = $(this).val();
            console.log(occupationAreaId);
            if (occupationAreaId) {
                $.ajax({
                    type: 'POST',
                    url: '{{route('ajax.occupation-area-skills')}}',
                    data: JSON.stringify({
                        _token: '<?php echo csrf_token() ?>',
                        id: occupationAreaId
                    }),
                    contentType: 'application/json; charset=utf-8',
                    success: function (result, status, xhr) {
                        console.log(result);

                    }
                });
            } else {
                $('#specialty_id').html('<option value="">Select Occupation Area</option>');
            }
        });
    });
</script>

Backend

public function specialties(Request $r)
    {
        $data = $this->skillRepository->allByOccupationAreaId($r->get('id'));
        return $data ? response()->json($data, 200) : response()->json(['data' => 'Not Found'], 404);

    }

Routes

//Ajax
Route::middleware(['auth'])->group(function () {
    Route::name('ajax.')->group(function () {
        Route::post('ajax/specialty/', 'Ajax\[email protected]')->name('occupation-area-skills');
    });
});

Please sign in or create an account to participate in this conversation.