CODEWITHSUNDEEP
jqueryajaxlaravel
Lucia
Lucia

Reputation: 310

Dynamic Dependent Drop down box not working using ajax in laravel

I'm working on a dynamic dependent dropdown selection using Ajax

When I select the first column, the second one is always empty and not showing me the list of the city.

Controller code :

 public function  index  () {
        $ville=Vil::orderBy('Ville','desc')->get();         
        return view ('index',['vi'=>$ville ]);

public function delegation ($id)

    {
        $delegation = DB::table("delegation")
        ->where("ville_id",$request->ville_id)
        ->pluck("ville","id");
        return response()->json($delegation);
    }

My routes:

Route::get('delegation','specvil@deleg');
Route::get('/index','specvil@index');

Jquery code :

<script>

    $('select[name="Région"]').on('change', function () {
    var countryID = $(this).val();
    if (countryID) {
        $.get('/deleg/' + countryID, function (data) {
            $('select[name="ville"]').empty();
            $.each(data, function (key, value) {
                $('select[name="ville"]').append('<option value="' + key + '">' + value + '</option>');
            });
        }, 'json');
    } else {
        $('select[name="ville"]').empty();
    }
    }):
    });         
</script>

The view :

<form action="{{route('ghof')}}" method="get">
   {{ csrf_field() }}
   <div class="from-box">
      <input type="text" class="search-field business" name="rech" value="" placeholder ="Cherchez..">
      <select type="text" class="search-field location" name="spec" id="s" value="spec" placeholder ="Spécialités">
         <option selected></option>
         @foreach($sp as $ss)
         <option value=" {{$ss->Spécialité}}"> {{$ss->Spécialité}}</option>
         @endforeach
      </select>
      <select type="text" class="search-field location" name="Région" id="Région" value="Région">
         <option selected></option>
         @foreach($vi as $vv)
         <option value="{{$vv->Ville}}">{{$vv->Ville}}</option>
         @endforeach
      </select>
      <select type="text" class="search-field location" name="ville" id="ville">
      </select>
      <button class="search-btn" type="submit" id="search"> Recherche </button>
   </div>
</form>

Upvotes: 2

Views: 875

Answers (1)

Amid
Amid

Reputation: 185

lets fix your select element change

<select type="text" class="search-field location" name="Région" id="Région" value="Région">

to

<select class="search-field location" name="region" id="region">

in your controller

public function delegation ($id)

here you accept a variable ($id) so you need to fix your ROUTE

and change

->where("ville_id",$request->ville_id)

to

->where("ville_id", $id)

change

Route::get('delegation','specvil@deleg');

to

Route::get('deleg/{id}','specvil@delegation');

as you can see your route needs to accept a variable and always check route path with your Ajax path. you controller method name must be same as method name after @ character.

jquery:

$('select[name="Région"]')

to

$('select[name="region"]')

Upvotes: 2

Related Questions