jeudi 4 avril 2019

How to display the values form database ato the options values in Laravel and Ajax

I have total 4 select boxes( e.g: 1) Car Make, 2) Car Model, 3) Manufacturing Year, 4) Body Type). I am able to populate the values to the 3rd select box i.e. Year but cant get the values for the last one. These data are fetched from the database table called carlist.

For Example: Select Car Make as Audi Select Car Model as A4 Select Manufacturing Year 2009

But now in the 4th select options, I get all the Car body types as: 4WD Van Sedan Wagon Coupe

The result I want to fetch is only sedan.

I am also able to make a success call from Ajax and when I am alerting it, I am getting the required results, but I am not able to get the values in the select box.

My code:

index.blade.php

<select class="form-input select button-shadow dynamic"   name="Make" id="Make"  data-dependent='Model'>

              @foreach($carLists as $carMake)
                <option value=""> </option>
              @endforeach
              </select>
         </div>

          <div class="form-wrap">
            <select class="form-input select button-shadow dynamic"  name="Model" id="Model"  data-dependent='Year'>
               <option value="">Select Make</option>
           </select>
         </div>

          <div class="form-wrap">
          <select class="form-input select button-shadow dynamic"  name="Year" id="Year"  data-dependent='Body'>
              <option value="">Select Year</option>
              </select>
            </div>

          <div class="form-wrap"> 
           <select class="form-input select button-shadow dynamic" name="Body" id="Body">
              <option value="">Select Body</option>
            </select>
          </div>

PagesController.php

  function fetch(Request $request)
          {
           $select = $request->get('select');
           $value = $request->get('value');
           $dependent = $request->get('dependent');
           $data = DB::table('carlists')
             ->where($select, $value)
             ->groupBy($dependent)
             ->get();

           $output = '<option value="">Select '.ucfirst($dependent).'</option>';
           foreach($data as $row)
           {
            $output .= '<option value="'.$row->$dependent.'">'.$row->$dependent.'</option>';
           }
           echo $output;
          }

          function fetchbody(Request $request)
          {
           $make = $request->get('make');
           $model = $request->get('model');
           $year = $request->get('year');
           $dependent = $request->get('dependent');

           $data = DB::select('Select Make, Model, Year, Body FROM carlists WHERE Make =  "'.$make .'" AND Model = "'.$model .'" AND Year = "'.$year .'" GROUP by Body');

           $output = '<option value="">Select '.ucfirst($dependent).'</option>';
           foreach($data as $row)
           {
            $output .= '<option value="'.$row->$dependent.'">'.$row->$dependent.'</option>';
           }
           echo $output;
          }

Route.php

Route::post('inc/sidebar/fetch', 'PagesController@fetch')->name('pagescontroller.fetch');
Route::post('car/make/body/fetch', 'PagesController@fetchbody')->name('bodycontroller.fetch');

javascript:

<script>
         $('#Year').on('change', function(e){

           var make = $('#Make').val();
           var model = $('#Model').val();
           var year = e.target.value;

           var dependent = $(this).data('dependent');

           var _token = $('input[name="_token"]').val();

           $.ajax({
              url:"",
              method:"POST",
              data:{make:make, model:model,  year:year, _token:_token, dependent:dependent},
              success:function(result)
              {

               $('#'+dependent).html(result);

               alert('Sucess: ' + make + ' ' + model + ' ' + year + result);
              }

           })


             });
    </script>


    <script>
          $(document).ready(function(){

           $('.dynamic').change(function(){
            if($(this).val() != '')
            {

             var select = $(this).attr("id");

             var value = $(this).val();

             var dependent = $(this).data('dependent');

             var _token = $('input[name="_token"]').val();
             $.ajax({
                url:"",
                method:"POST",
                data:{select:select, value:value, _token:_token, dependent:dependent},
                success:function(result)
                {

                 $('#'+dependent).html(result);
                }

             })
           }
           });


</script>

Not too sure how to fix this and display as options.



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire