How to solve Laravel Ajax dropdown? - php

Question

Here is my output. When user select the site, the list of controller will display. My problems is when user select the site, the list of controller does not displayed.
Controller:
public function index()
{
$sites = Sites :: pluck ('sites_id' ,'site_code' , 'site_name');
return view ('query.index',compact('sites'));
}
public function getController($sites_id){
$controllerData['data'] = device_profile::orderby("dvc_name","asc")
->select('id','dvc_name')
->where('sites',$sites_id)
->get();
return response()->json($controllerData);
}
View:
<div class="form-group">
<label class="control-label mb-10 text-left">Site:</label>
<select name="sites_id" class="form-control" required="">
#foreach ($sites as $site_code => $sites_id)
<option value="{{$sites_id}}"
{{ old('sites_id') == $sites_id ? 'selected' : '' }}>
{{ $site_code }}
</option>
#endforeach
</select>
#error('sites_id')
<span class="invalid-feedback" role="alert">
<strong>{{ $message }}</strong>
</span>
#enderror
</div>
<div class="form-group">
<label for="dvc_name">Select Controller:</label>
<select name="dvc_name" class="form-control" required="">
<option>--Controller List--</option>
</select>
</div>
<script type='text/javascript'>
$(document).ready(function(){
// Department Change
$('#sites_id').change(function(){
// Department id
var id = $(this).val();
// Empty the dropdown
$('#dvc_name').find('option').not(':first').remove();
// AJAX request
$.ajax({
url: 'getController/'+sites_id,
type: 'get',
dataType: 'json',
success: function(response){
var len = 0;
if(response['data'] != null){
len = response['data'].length;
}
if(len > 0){
// Read data and create <option >
for(var i=0; i<len; i++){
var sites_id = response['data'][i].sites_id;
var dvc_name = response['data'][i].dvc_name;
var option = "<option value='"+sites_id+"'>"+dvc_name+"</option>";
$("#dvc_name").append(option);
}
}
}
});
});
});
</script>
Web:
Route::get('query-index', 'QueryDataController#index')->name('query.index');
Route::get ('query-controller/getcontrollers/{sites_id}', 'QueryDataController#getControllers')->name('profile.getControllers');
Below is my database for sites and device profile:
Sites:
Device Profile:
I hope someone can help me to solve this problem. Thank you.

Answer 1

your URL in your ajax method is:
url: 'getController/'+sites_id,
And your route is :
Route::get ('query-controller/getcontrollers/{sites_id}', 'QueryDataController#getControllers')->name('profile.getControllers');
So you should change your ajax URL to this:
url: 'query-controller/getControllers/'+sites_id,

Answer 2

In this you have to call that url in ajax, url should be same as that you mention in Routes,
$('#sites_id').change(function(){
var site_id=this.value;
$.ajax({
siteid:site_id,
url : 'query-controller/getcontrollers/'+siteid,
})
})