Ajax laravel 在模态中显示客户端信息

Question

我正在开发汽车租赁应用程序。我有三个表：Clients、Cars 和 locations。

表位置：以客户端的 cin 作为外键，以 Car id 作为外键。

这是客户端和位置模态之间的关系：

class client extends Model
{

 protected $primaryKey = 'cin';

   public $incrementing = false;

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

     }

这里显示所有客户端：

  <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>

当我点击客户时：我想显示他的信息以及他租用的汽车。

我可以显示他的信息，但我不能显示他租的汽车。

这里是模态：

<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>

我的 Ajax 函数：

$.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');

 });

我的路线：

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

我的控制器

  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]);
 }

控制器中的逻辑运行良好，所以我认为问题出在 Ajax 函数中。

问题描述：当我点击按钮显示时，我将客户端的 id 传递给我的控制器，然后我想用 ajax 显示客户端租车，但没有显示..

Answer 1

首先，我认为最好将html 属性转换为实际保存html 元素（例如，使用document.createElement('tr')）。

其次，post 回调中的 $.each() 函数什么也不做。 $.each(arrayLikeObject, function) 将返回你给它的对象。这意味着appendTo 将不起作用。 appendTo 也只能作用于 jQuery 对象，这些是使用 $('selector') 语法时返回的对象。如果有任何错误（应该有），您应该检查控制台。

因此，您的解决方案是首先将 html 变量设置为您的 html（或编辑元素，如果它设置为一个），然后将其附加到表中：

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

我的新 ajax 函数，现在可以使用了

     $(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');

});