单击事件打开一个包含特定项目的模态

Question

我想点击一个事件(点击订单(打开带有特定订单项的模态。就我而言，它只打开最后一个订单。因此，在我点击的每一个事件中，它都会向我显示最后一个订单和最后一个项目。

<script>
jQuery(document).ready(function($) {
$('#calendar').fullCalendar({
height: 'auto',
header: {
left:   'Calendar',
center: '',
right:  'today prev,next'
},
events : [
@foreach($orders as $order)
{
id: '{{ $order->id }}',
title : 'Order#{{ $order->id}}',
description:'{{ $order->id}}' ,

start : '{{ date('Y-m-d') }}',
color:'#008070',
},
@endforeach
],
eventClick: function(event) {
$("#successModal{{$order->id}}").modal("show");
$('#order_id').val(calEvent._id);
$("#successModal .modal-body p").text(event.title);
}
});
});
</script>

<div class="modal fade" id="successModal{{$order->id}}" tabindex="-1" role="dialog" aria-labelledby="successModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<table class="table table-condensed table-hover">
<tbody>
@php
$items=AppOrder_Items::where('id_order',$order->id)->get();
@endphp
@foreach($items as $item)
<tr>
<td align="center">
</td>
<td align="center">
@php
$total = $item->price / $item->quantity;
@endphp
{{ $total }}
</td >
<td align="center">{{$item->quantity}} </td>
<td class="text-center sbold" align="center">{{number_format($item->price)}} </td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>

这种情况下我该怎么办？我试图弄清楚这个问题，但仍然不明白为什么会发生这种情况。

Answer 1

在@endforeach命令中停止循环执行订单。在那之后，就不会再循环了，所以$order->id固定为上次执行循环时的值。之后每次使用它时，它都会有最后一个ID的值。

因此，如果您有10个订单，您的eventClick回调将如下所示：

eventClick: function(event) {
$("#successModal10").modal("show");
$('#order_id').val(calEvent._id);
$("#successModal .modal-body p").text(event.title);
}

10在JavaScript中是一个固定值，因为PHP$order->id的输出被插入到输出中，然后发送到浏览器。同样，在创建页面时，模式HTML将固定该订单的订单ID详细信息。如果您使用浏览器的"查看源代码"功能查看服务器发送给它的最终HTML和JavaScript，您可以看到这一点。

请记住，PHP在页面加载到浏览器之前在服务器上执行，JavaScript只有在页面准备好后才执行。因此，PHP生成的任何值都会硬编码到页面中，直到您再次从服务器重新加载该页面。你可能会发现这篇文章是有用的背景读物。

简而言之，您没有提供任何机制来使用用户单击的项目中的订单数据更新模态中的数据；相反，您已经提前固定了值。

正确实现此功能的一种非常常见的方法是像现在这样处理eventClick，获取单击的订单的ID，并使用该ID向服务器发送AJAX请求以获取特定订单的详细信息。然后，服务器将返回订单数据(最常见的是JSON格式(，您可以使用JavaScript收集包含订单数据的响应，并在向用户显示之前，将该信息放在模态的HTML中的正确位置。