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=App\Order_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在服务器上执行。因此，PHP生成的任何值都会硬编码到页面中，直到再次从服务器重新加载该页面为止。您可能会发现this article是有用的背景知识。

因此，简而言之，您没有提供任何机制来用用户单击的项目中的订单数据更新模式中的数据。相反，您已经预先确定了该值。

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

点击事件后，打开包含特定项目的模式

1 个答案: