По нажатию на событие откройте модал с определенными предметами - PullRequest
Новая
       33

По нажатию на событие откройте модал с определенными предметами

0 голосов
/ 11 ноября 2019

Я хочу, чтобы при щелчке по событию (по щелчку заказа) открывалось модальное окно с конкретными позициями заказа. В моем случае он открывает только последний ордер. Таким образом, в каждом событии, которое я нажимаю, отображается последний заказ и последние пункты. 

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

Что мне делать в этом случае? Я пытаюсь выяснить проблему, но все еще не понимаю, почему это происходит.

1 Ответ

0 голосов
/ 11 ноября 2019

Вы перестаете просматривать свои заказы по команде @endforeach. По истечении этого времени вы не будете повторять цикл, поэтому $order->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 будет иметь фиксированные данные идентификатора заказа для этого заказа при создании страницы. Это можно увидеть, если вы используете функцию просмотра исходного кода вашего браузера для просмотра окончательного HTML и JavaScript, которые были отправлены ему сервером.

Помните, что PHP выполняется на сервере до страница загружается в браузер, и JavaScript выполняется только позже, когда страница готова. Поэтому любое значение, сгенерированное PHP, жестко запрограммировано на странице, пока вы снова не перезагрузите эту страницу с сервера. эта статья может оказаться полезной для справочного чтения.

Короче говоря, вы не предоставляете какой-либо механизм обновления данных в модале данными заказа из элемента, которыйпользователь нажал на;вместо этого вы заранее зафиксировали значение.

Очень распространенный способ правильно реализовать эту функцию - обработать eventClick, как вы делаете сейчас, взять идентификатор ордера, по которому щелкнули, и использовать его для отправкиAJAX-запрос к серверу, чтобы получить детали конкретного заказа. Затем сервер вернет данные заказа (чаще всего в формате JSON), и вы можете использовать JavaScript для сбора ответа, содержащего данные заказа, и поместить эту информацию в правильное место в HTML-коде модального вида, прежде чем показывать его. пользователю.

...