Ajax laravel show Clients informations in Modal

Question

i am developing a car rental Application . i have three tables: Clients , Cars and locations.

the table locations : have the cin of the Client as foreign key , and also the Car id as foreign key.

here is the relations between client and location modal:

class client extends Model
{

 protected $primaryKey = 'cin';

   public $incrementing = false;

  public function locations()
    {
   return $this->hasMany(Location::class);
  }

     }

here i display all clients :

  <table class="mytable" id="table">
  <tr><th>Nom</th><th>Prenom</th><th>CIN</th><th>Email</th><th >Action</th> 
</tr>
  {{ csrf_field() }}

   @foreach($clients as $client)
 <tr class="client{{$client->cin}}">
 <td>{{ $client->nom }}</td><td>{{ $client->prenom }}</td><td>{{ $client- 
 >cin }}</td><td>{{ $client->email }}</td>
 <td>
  <span><a type="button" class="show-modal" href="#"  data-nom="{{$client- 
   >nom}}" data-prenom="{{$client->prenom}}"  data-tel="{{$client->tel}}" 
  data-cin="{{$client->cin}}" data-email="{{$client->email}}"><img 
   src="img/ac3.png"></a></span>
  </td></tr>
  @endforeach
 </table>

when i click on a client : i want to show his informations and also the cars that he rents .

i am able to show his informations, but i am not able to show the cars he rents.

here is the modal:

<div id="show" class="modal fade" tabindex="-1" role="dialog" aria- 
labelledby="myModalLabel" aria-hidden="true" style="display: none;">
<div class="modal-header"> 
   <button type="button" class="close" data-dismiss="modal" aria- 
 hidden="true">×</button> 
   <h4 class="modal-title" style="color:#005b7f;"> Client Infos</h4> 
</div> 

<div class="modal-body">                     
   <div id="modal-loader" style="display: none; text-align: center;">
   <!-- ajax loader -->
   <img src="img/ajax-loader.gif">
   </div>

  <tr>
 <th >NOM</th>
  <td id="nom"></td>
   </tr>
   <tr>
      <th >PRENOM</th>
    <td id="prenom"></td>
 </tr>
  <th >TELEPHONE</th>
 <td id="tel"></td>
  </tr>
  <th >CIN</th>
  <td id="cin"></td>
 </tr>
  <th >Email</th>
 <td id="email"></td>
    </tr>

   </table>

   <br><br>

       <h4 style="color:#005b7f">Liste des voitures occupé par ce 
 client</h4>

    //the rent car should be showed here

       <table class="mytable" id="mytable">

      </table>               

   </div>

  </div> 

   <div class="modal-footer"> 
    <button type="button" class="btn btn-default" data- 
 dismiss="modal">Close</button>  
 </div> 

 </div> 
 </div>
    </div>

My Ajax Function:

$.ajaxSetup({
   headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
 });

 //show function 
    $(document).on('click', '.show-modal', function() {
    $('#show').modal('show');
    $('#nom').text($(this).data('nom'));
    $('#prenom').text($(this).data('prenom'));
    $('#tel').text($(this).data('tel'));
    $('#cin').text($(this).data('cin'));
    $('#email').text($(this).data('email'));


    //Along with your modal action you can use following code

     var cin = $(this).data('cin');
   $.post('client/'+cin, function(response){ 
  if(response.success)
  {
    var html = '<tr><th>Date de prise</th><th>Date de fin</th> 
 <th>Matricule</th>         
<th>details de contrat</th></tr>' ;
    $.each(response.car_data, function(i, car_data){
        html = html + "<td>" + car_data.date_prise +"</td>" + "<td>" + 
   car_data.date_fin +"      
     </td>"
        +"<td>" + car_data.voiture_matricule +"</td>";
    }).appendTo("#mytable");
  }

   },'json');

 });

my Route:

      Route::post('client/{cin}', 'ClientsController@getclientData');

my Controller

  public function getclientData($cin){
  $car_dat = array();

  $car_dat= Client::find($cin);
  $car_data=array();
  $car_data=$car_dat->locations;

 return response()->json(['success' => true, 'car_data' => $car_data]);
 }

the logic in the controller works well, so i think the problem is in the Ajax function.

Problem description: when i click the button show i pass the id of the client to my controller,then i want to show Client rent car with ajax , but nothing shown ..

Answer 1

First of all, I think it will be best if you converted the html attribute to actually hold html elements (eg using document.createElement('tr') ).

Secondly, your $.each() function in the post callback does nothing. $.each(arrayLikeObject, function) will return the object you give it. This means appendTo will not work. Also appendTo can only work on jQuery objects, these are the objects that are returned when you use $('selector') syntax. You should check the console if there are any errors (which there should be).

So your solution would be to first set the html variable to your html (or edit the element if it is set to one), and then append it to the table:

 var testArray = { data: [ "Wow", "awesome", "again" ] }; var html = "<h2>Please use actual HTML elements using document.createElement</h2>"; $.each(testArray, function(index, testData) { html = html + "<p>" + testData[0] + ", this is " + testData[1] + ". Please let's try this " + testData[2] + "</p>"; }); $('#mytable').html(html); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="mytable"></div> 

Answer 2

my new ajax function , now it works

     $(document).on('click', '.show-modal', function() {
     $('#show').modal('show');
     $('#nom').text($(this).data('nom'));
     $('#prenom').text($(this).data('prenom'));
     $('#tel').text($(this).data('tel'));
     $('#cin').text($(this).data('cin'));
     $('#email').text($(this).data('email'));


  //Along with your modal action you can use following code


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


$.post('client/'+cin, function(response){ 

if(response.success)
    {
       var html=" <tr><th>Date de prise</th><th>Date de fin</th><th>Matricule</th> 
  <th>details de contrat</th></tr> " ;

          $.each(response.car_data, function(i, car_data) {

                                        html += "<tr class='historique'>"+
                                        "<td>" + car_data.date_prise +"</td>" + 
                                        "<td>" + car_data.date_fin +"</td>"+
                                        "<td>" + car_data.voiture_matricule +"</td>"+
                                        "<td>" + cin +"</td>"+"</tr>"



                                                            });
          $('#mytable').html(html);

   }
},'json');

});