On click of event open a modal with specific items

Question

I want on click of an event ( on click of order) to open the modal with specific order items. In my case, it opens only the last order. So in every event that I click, it shows me the last order and the last items.

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

What should I do in this case? I am trying to figure out the problem but still don't understand why this happens.

Answer 1

You stop looping through your orders at the @endforeach command. After that time, you do not loop again, so $order->id is fixed at the value it had the last time the loop was executed. Every time you use it after that, it will have the value of the last ID.

Consequently, if you have 10 orders, your eventClick callback will look like this:

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

The 10 is a fixed value in your JavaScript, because the output of the PHP $order->id is inserted into the output which is then sent to the browser. In the same way, the modal HTML will have the order ID details for that order fixed when the page is created. You can see this if you use your browser's View Source feature to look at the final HTML and JavaScript which was sent to it by the server.

Remember that PHP executes on the server before you page is loaded into the browser, and the JavaScript only executes later when the page is ready. Anything value which is generated by PHP is therefore hard-coded into the page until you reload that page again from the server. You might find this article to be useful background reading.

So in short, you are not providing any mechanism for the data in the modal to be updated with the order data from the item the user clicked on; instead you have fixed the value in advance.

A very common way to implement this feature correctly would be to handle the eventClick as you are doing now, take the ID of the clicked order, and use that to send an AJAX request to the server to get the details of the specific order. The server will then return the order data (in JSON format, most commonly), and you can use JavaScript to collect the response containing the order data, and put that information into the correct place in the HTML of the modal, before you show it to the user.