Laravel 5.6 Return wrong ID in foorloop

Question

In the loop below i am getting the packages and returning their data in a card normally. everything works but if i want to delete a specific package by their id. For example when i want to delete package with ID of 1 it rather deletes package ID of 4 instead. I have debugged and found out it just returning a wrong ID to the url. Therefore delete the wrong object.

@foreach($packages as $package)
                <div class="modal" tab index="-1" role="dialog"id="deleteModal">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">Confirmation</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <p class="text-center">Are you sure that you want to delete this package information ?</p>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-danger" data-dismiss="modal">No</button>
                                <a href="{{route('packages.new.delete',$package->id)}}" class="btn btn-success">
                                    Yes
                                </a>
                            </div>
                        </div>
                    </div>
                <div class="card mb-4" style="width: 80%;">
                    <div class="card-header">
                        <div class="row">
                            <div class="col-md-2">
                                <b>User: {{$package->user->name}}</b>
                            </div>

                            <div class="col-md-4">
                                <b>{{$package->created_at}}</b>
                            </div>

                            <div class="col-md-4">
                                <h6><b>#{{$package->packageID}}</b></h6>
                            </div>
                            <div class="col-md-1">
                                <a href="{{route('packages.status',$package->id)}}" class="btn btn-outline-info float-right mr-2">
                                    <i class="fa fa-clock"></i>
                                </a>
                            </div>
                            <div class="col-md-1">
                                <button type="button" class="btn btn-outline-info float-right mr-2"
                                        data-toggle="modal"
                                        data-target="#deleteModal">
                                    <i class="fa fa-trash"></i>
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                    <img class="float-left mr-3"  src="{{asset('images/defaultpackage.png')}}" style="width: 10%" alt="Card image cap">
                        <div class="row">
                            <div class="col-md-6">
                                <h5 class="card-title">{{$package->content}}</h5>
                                <p class="card-text text-muted">{{$package->instructions}}</p>
                                <a href="#" class="card-link">Card link</a>
                                <a href="#" class="card-link">Another link</a>
                            </div>

                            <div class="col-md-4">
                                <h5 class="card-title">Warehouse Info</h5>
                                <div class="card-text"><span class="text-muted">Courier Service:</span> <b>   {{$package->cn_courier}} </b><br>
                                    <span class="text-muted">Courier Tracking No.:</span> <b>   {{$package->cn_tracking_no}} <br>
                                        @if($package->pictures == 0 )
                                            <span class="text-muted">Image: No</span> <br>
                                        @elseif($package->pictures == 1)
                                            <span class="text-muted">Images:</span> <b>Yes </b><br>
                                        @endif

                                        <span class="text-muted">Pack:</span> <b>{{$package->pack->name}} <br>
                                            <span class="text-muted">Total Weight:</span>
                                            @if($package->weight == null)
                                                <b>
                                                    Unknown
                                                </b>
                                            @else
                                                {{$package->weight}} kg
                                            @endif
                                        </b>
                                    </b>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
            {{$packages->links()}}

score 0 · Answer 1 · answered Jun 07 '18 at 04:10

<div class="modal" tab index="-1" role="dialog"id="deleteModal">

Shows that you are creating duplicate id's in the HTML generated from this loop.

ID's are supposed to be unique per page. You may need to append something to the id in order to make each of these cards unique.

Having duplicate id's can cause scripts to target elements you wern't expecting, as it's undefined which element will targeted if multiple elements exist with the wrong id.

This is most likely the cause of the 'deletions' targeting the wrong HTML elements.

score 0 · Answer 2 · answered Jun 07 '18 at 04:40

As you can see you are using loop to display data and action buttons:

Here you does not have unique ID : id="deleteModal" in modal

Put unique ID there like : id="deleteModal_'.$package->id.'".

and same in button also data-target="#deleteModal_'.$package->id.'"

Note: the ID of JS is unique so never use it repeatedly

score 0 · Answer 3 · answered Jun 07 '18 at 05:38

You put modal window into the loop and produced several modals. Instead, move the modal outside of the loop to have one modal. Loop for the packages to list them (most probably you did it) and use data attributes for id, name etc. like <a data-id="{{ $package->id}}" data-name="{{ $package->name}}">

Next, add a jQuery function and use id, name etc. in the modal. Example:

$('#deleteModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget)
  var id = button.data('id')
  var name = button.data('name')
  var action = $(this).find('form').attr('action')
  $(this).find('form').attr('action', action + '/' + id)
})

Laravel 5.6 Return wrong ID in foorloop

3 Answers3