dollar dollar - 2 months ago 24
Ajax Question

unable to read json data in Jquery code in Laravel 5.2

I am trying to populate second dropdown based on value selected in first dropdown in Laravel.

enter image description here

When Cinema Hall is selected , it should populate screen dropdown , so I have used here ajax for doing so.

My code is below

HTML code

<div class="form-group">
<label class="control-label col-md-3">Cinema Hall
<span class="required" aria-required="true"> * </span>
</label>
<div class="col-md-4">
{!! Form::select('cinema_id',$cinemahall,Null,array('class'=>'bs-select form-control','aria-invalid'=>'false','id'=>'cinemahall')) !!}
</div>

</div>

<div class="form-group">
<label class="control-label col-md-3">Screen
<span class="required" aria-required="true"> * </span>
</label>
<div class="col-md-4">
{!! Form::select('screen_id',[],Null,array('class'=>'bs-select form-control','aria-invalid'=>'false','id'=>'screenname')) !!}
</div>

</div>


Jquery code

<script>
$(document).ready(function(){
$("#cinemahall").change(function(){

var cinema_id=$("#cinemahall option:selected").val();
//ajax
$.get('/askspidy/admin/showtime/getscreen/' + cinema_id, function(data){
$("#screenname").empty();
// console.log(data);

$.each(data,function(index,screenobj){
$("#screenname").append('<option value="' +screenobj.screen_id + '">' +screenobj.name +'</option>');

});
});
});
});
</script>


Routes

Route::get('/admin/showtime/getscreen/{id}','Admin\ShowtimeController@getscreen');


controller function

public function getscreen($id)
{
$screens=Movies_screen::where('cinema_id',$id)->get();
return response()->json($screens);
}


I checked in Console.log(data) its showing proper data no problem

enter image description here

But dropdown is populating like this

enter image description here

help me to resolve this.

Answer

Your should replace screenobj.name with screenobj.screen_name as shown in your response preview.

$("#screenname").append('<option value="' +screenobj.screen_id + '">' +screenobj.screen_name +'</option>');