php - Laravel 5.2 cascaded dropdown value not appearing using Ajax

I am building a laravel application where there is a situation of cascading dropdown where user will select a department from list of departments.So when a user select a department teacher will be loaded on that particular data.

I have written all the code. But the problem is after selecting department, instead of loading teacher data, it's showing 'Ok' as it fails.

I don't know why data not get loaded. If anyone find the solution, hope will help to get the solution.

Here is my Route:

Route::get('ajax',function(Request $request){
     $department_id = $request->Input(['department_id']);
    $teacher=\App\Teacher::where('department_id','=',$department_id)->get();
      return Response::json($teacher);

});

View page with ajax:

    <div class="container" >
            <h3> Create Teacher </h3>
        {!! Form::open(array('route' => 'savecourseAssignTeacher','class'=>'form-horizontal','method'=>'POST'))  !!}
    {!! Form::token(); !!}
    {!!   csrf_field() ; !!} 

        <div class="form-group">
            <label for="">Department</label>
            <select class="form-control input-sm" required name="department_id" id="department" >
            @foreach($department as $row)
            <option value="{{$row->id}}">{{$row->name}}</option>
            @endforeach
            </select>
        </div> 

         <div class="form-group">
            <label for="">Teacher</label>
            <select class="form-control input-sm" required name="teacher_id" id="teacher" >
            <option value=""></option>
            </select>
        </div>              

            <button type="submit" class="btn btn-default">Assign</button>
        {!! Form::close() !!}
        </div>
     <script>
      $('#department').on('change',function(e){

       $('#teacher').find('option').remove().end();
        var department_id = $('#department option:selected').attr('value');

        var info=$.get("{{url('ajax')}}",{department_id:department_id});
        info.done(function(data){     
          $.each(data,function(index,subcatObj){
            $('#teacher').append('<option value="'+subcatObj.id+'">'+
                          subcatObj.name+'</option>');
          });
        });
        info.fail(function(){
          alert('ok');

ronty

10 years ago

Level 1

ok, first check that your department id is properly send by ajax or not by simply return the only department id, and alert it in success part of ajax ..if it is proper then your are very close to solution..

Javed71

10 years ago

Level 1

How do I check it?

jondoe

10 years ago

Level 1

Did you ever solve this? I am having a similar problem

Javed71

10 years ago

Level 1

@jondoe Yup I've solved the problem And Here is the Ajax part I was fighting for with the solution:

 <script>
      $('#department').on('change',function(e){       
         $('#teacher').find('option').remove().end();
           var dept_id = $('#department option:selected').attr('value');           
             var info=$.get("{{url('ajax')}}",{dept_id:dept_id});
               info.done(function(data){     
                  $.each(data,function(index,subcatObj){
                     $('#teacher').append('<option value="'+subcatObj.id+'">'+
                                subcatObj.name+'</option>');
                    });
        });
              
        info.fail(function(){
          alert('ok');
        });
       });
    </script>

And the route:

Route::get('ajax',function(Request $request){
        $dept_id = $request::input(['dept_id']);            
        $teachers=\App\Teacher::where('department_id','=',$dept_id)->get();
        return Response::json($teachers);   
    });

UNITED

9 years ago

Level 1

I am having a similar problem myRoute :

Route::get('/', function () {
        $kecamatan = App\Districs::all();
        return view('welcome')->with('kecamatan',$kecamatan);
});
Route::get('ajax', function(Request $request){
    $kec_id = $request::Input(['kec_id']);
    $villages = \App\Villages::where('kecamatan_id', '=', 
    $kec_id)->get();
    return Response::json($villages);
});

Script :

<script>
        $('#districs').on('change', function(e){
        $('#villages').find('option').remove().end();
        var kec_id = $('#districs option:select').attr('value');
        var info=$.get("{{url('ajax')}}",{kec_id:kec_id});
        info.done(function(data){
            $each(data,function(index,vilObj){
                    $('#villages').append('<option value="'     
            +vilObj.id+'">'+vilObj.name+'</option>');
                });
        });
        info.fail(function){
            alert('ok');
         });
        });
</script>

my view :

{!!Form::open(array('url'=>'', 'files'=>true))!!}
        <div class="form-group">
                <label for="title">Pilih Kecamatan :</label>
                        <select class="form-control input-sm"   
            name="kecamatan_id" id="districs">
                                @foreach ($kecamatan as $row)
                                <option value=""{{$row->id}}>{{$row->nama}}
                </option>
                                @endforeach         
                            </select>
             </div>
             <div class="form-group">
                <label for="">Pilih Kelurahan</label>
                        <select class="form-control input-sm" 
            name="kelurahan_id" id="villages">
                                <option value=""></option>          
                            </select>  
             </div>
             <div class="form-group">
                <button type="submit" class="btn btn-default"> Pilih
                    </button>
             </div>
   {!! Form::close() !!}

But i have result "SyntaxError: missing ( before formal parameters"

Please or to participate in this conversation.