Loading up the details of particular record on a modal using an id

Question

I have a table, which lists all the data in the database table order . There is a button for each, which when clicked needs to open a modal panel that shows all the order items that associated with that particular order from the database table orderItem. How can I achieve this??
The following is the code that produces the modal panel, which currently lists all the records from orderItems. I need to show only the ones with associated with a certain order id.

<div id="viewOrderItemModal" class="container modal fade modal-lg" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true"
                        aria-label="close">&times;</button>
                <h3 class="text-center">Order Items</h3>
            </div>
            <div class="modal-body">
                <div class="table-responsive">
                    <table class="table">
                        <thead>
                        <tr>
                            <th >Item</th>
                            <th >Image</th>
                            <th >Size</th>
                            <th >Quantity</th>
                            <th >Total</th>
                            <th >Status</th>
                            <th >

                            </th>
                        </tr>
                        </thead>
                        <tbody id="tableModel">
                        @foreach($orderItems as $orderItem)

                                <tr>
                                    <td>{{$orderItem->item->name}}</td>
                                    <td>
                                        <div class="image">
                                            <a href="{{ asset("/images/items/{$orderItem->item->imagePath}") }}"><img style="width: 50px;height: 50px;"
                                                                                                                        src="{{ asset("/images/items/{$orderItem->item->imagePath}") }}"></a>
                                        </div>
                                    </td>
                                    <td>{{$orderItem->size}}</td>
                                    <td>{{$orderItem->quantity}}</td>
                                    <td style="width: 120px;">Rs. {{$orderItem->subTotal}}.00</td>
                                    <td>{{$orderItem->orderStatus}}</td>
                                    <td>
                                        <a style="margin-bottom: 5px;" onclick="showChangeOrderStatusModal({{$orderItem->id}})" class=" btn btn-success btn-xs">Change Status </a>
                                    </td>

                                </tr>


                        @endforeach


                        </tbody>
                    </table>
                </div>
            </div>
            <div style="padding: 5px;" class="modal-footer">
                <button style="width: 100px" type="submit" class="btn btn-success pull-left btn-sm ">
                    Save Change
                </button>
                <button class="btn" data-dismiss="modal" aria-hidden="true">OK</button>
            </div>
        </div>
    </div>
</div>

current view of the table

Instead of using a modal and introducing a level of complexity that you're not quite familiar with yet - just send the user to a new page to view it. — Ohgodwhy, Dec 08 '16 at 19:14

score 0 · Answer 1 · edited Dec 08 '16 at 21:11

0

You can set an attribute on each View Order Items button, which contains the OrderID. So on the click event of a button the ID of the Order is sent as a parameter. Then in the server-side request you will get the OrderItems related to that OrderID using the parameter. But a better approach would be to redirect the user to another page.

edited Dec 08 '16 at 21:11

Sᴀᴍ Onᴇᴌᴀ

8,218
8
36
58

answered Dec 08 '16 at 19:16

Sagar Jajoriya

21
4

score 0 · Answer 2 · edited May 23 '17 at 12:13

I'd use an ajax request.

For example in jquery:

Add to View order items buttons regular link to some API endpoint as /api/order/1/items
In this endpoint, you will load the order, pass it to the view where the code for the modal is located (the one you showed).

// in the /api/order/1/items controller public function items(Order $order) { return view('modals.order.items', compact('order')); // or $items = $order->items }

This will return a string (view content with your order items).

So you need to load the view content via the ajax request and show the modal (Bootstrap 3 with remote Modal).

Or the easy one solution - just redirect to the separated page.

Loading up the details of particular record on a modal using an id

2 Answers2