I’m trying to make dependent dropdown, lets say I have contractor dropdown, on clicking any option it should load respective subcontractor in subcontractor dropdown.
On making ajax request I get 404 response.
this is the route:
Route::post('/get_subContractors/{id}', [WorkmenDetailsController::class, 'getsubContractors']);
Controller:
public function getsubContractors($contractor_id = null){
$subContractors = SubContractor::where('$contractor_id', $contractor_id)->get();
return response()->json([
'status' => 1,
'subContractors' => $subContractors
]);
}
dropdown fileds in bootstrap modal:
<div class="form-group col-md-6">
<label for="contractor" class="">Contractor</label>
<select name="contractor_id" id="contractor" class="form-select">
<option selected>Select Contractor</option>
@foreach ($contractors as $contractor)
<option value="{{ $contractor->id }}">{{ $contractor->name }}</option>
@endforeach
</select>
</div>
<div class="form-group col-md-6">
<label for="subContractor" class="">Sub Contractor</label>
<select name="subContractor_id" id="subContractor" class="form-select">
<option value="">Select SubContractor</option>
{{-- @foreach ($subContractors as $subContractor)
<option value="{{ $subContractor->id }}">{{ $subContractor->name }}</option>
@endforeach --}}
</select>
</div>
</div>
jquery included in blade file:
<script>
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN' : $('meta[name="_token"]').attr('content')
}
});
$(document).ready(function() {
$(".add").click(function() {
console.log('click..')
$("#contractor").change(function() {
var contractor_id = $(this).val()
$.ajax({
url: '{{ url("/get_subContractors/") }}/'+contractor_id,
type: 'post',
datatype: 'json',
success: function(response) {
console.log(response);
if(response['subContractors'].length > 0) {
$.each(response['subContractors'], function(key, value) {
$("#subContractors").append("<option id='"+value['id']+"'>"+value["name"]+"</option>")
});
}
}
})
})
});
});
</script>
As I console log the response I get 404, what could have went wrong