单击事件打开包含特定项目的模式

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 在页面加载到浏览器之前在服务器上执行，而 JavaScript 仅在页面准备就绪后执行.因此，由 PHP 生成的任何值都会被硬编码到页面中，直到您再次从服务器重新加载该页面。您可能会发现 this article 是有用的背景阅读。

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

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

单击事件打开包含特定项目的模式

On click of event open a modal with specific items

html

javascript

fullcalendar

laravel

fullcalendar-3