I'm having two dropdown fields which is based on one another Class & Section. I want
Select * from sections where class_id=selected Class Id.
I used java script to manage that but it is not working for me.
My dropdown fields
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="col-md-6">
<label>Category</label>
<select class="form-control" name = "class">
<option value="0">Please Select Category</option>
@foreach($classses as $classs)
<option value="{{$classs->id}}">{{$classs->title}}</option>
@endforeach
</select>
</div>
</div>
<div>
<div class="col-md-6">
<label>Products</label>
<select class="form-control" name = "section">
<option value="0">Please Select Product</option>
@foreach($sections as $section)
<option value="{{$section->id}}">{{$section->title}}</option>
@endforeach
</select>
</div>
</div>
</div>
</div>
JavaScript
<script>
jQuery(document).ready(function ($) {
$('select[name=classs]').on('change', function () {
var selected = $(this).find(":selected").attr('value');
$.ajax({
url: base_url + '/classs/'+selected+'/sections/',
type: 'GET',
dataType: 'json',
}).done(function (data) {
var select = $('select[name=section]');
select.empty();
select.append('<option value="0" >Please Select Product</option>');
$.each(data,function(key, value) {
select.append('<option value=' + key.id + '>' + value.title + '</option>');
});
console.log("success");
})
});
});
Route
Route::get('/dropdown','DropDownController@index');
Route::get('classs/{id}/sections', 'DropDownController@getSection');
Dropdown Controller
public function index(){
$classses = Classs::all();
$sections =Section::all();
return view('classs.a', compact('classses','sections'));
}
public function getSection($id){
if($id!=0){
$sections = Classs::find($id)->sections()->select('id', 'title')->get()->toArray();
}else{
$sections = Section::all()->toArray();
}
return response()->json($sections);
}
}
Classs Modal
class Classs extends Model
{
//
protected $fillable = [
'id',
'title',
];
public function section()
{
return $this->hasMany('App\Section');
}
}
Section Modal
class Section extends Model
{
//
protected $fillable = [
'id',
'title',
'class_id', //foreign key of Classs
'user_id',
];
public function classs()
{
return $this->belongsTo('App\Classs');
}
But in actual when I get result, it gets all the classes & all the sections. It maybe some error in syntax. I m so stuck. Please help me in this case.
You first need to make sure if your JS is getting called directly.
Add a couple of console.log calls to the script:
<script>
jQuery(document).ready(function ($) {
console.log('listening for change event', $('select[name=classs]')[0]);
$('select[name=classs]').on('change', function () {
var selected = $(this).find(":selected").attr('value');
console.log('change event fired. selected value:', selected);
$.ajax({
url: base_url + '/classs/'+selected+'/sections/',
type: 'GET',
dataType: 'json',
}).done(function (data) {
console.log('ajax response', data);
var select = $('select[name=section]');
select.empty();
select.append('<option value="0" >Please Select Product</option>');
$.each(data,function(key, value) {
select.append('<option value=' + key.id + '>' + value.title + '</option>');
});
console.log("success");
})
});
});
Now check:
listening for change event logged on page load, with the correct element as a parameter?change event fired logged on select value change, with the correct value?ajax response logged with the correct data (id, title)?