表位置:将Client的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租车,但未显示任何内容。
答案 0 :(得分:0)
首先,我认为最好将html
属性转换为实际包含html元素(例如,使用document.createElement('tr')
)。
第二,您在$.each()
回调中的post
函数什么也不做。 $.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>
答案 1 :(得分:0)
我的新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');
});