Pulling first ID no matter what I am doing

I'm sure its a quick fix but I have been through this code trying things and I am not sure what is going on. On the destroy method, Its pulling the first ID in the table regardless of what I do.

blade view

<table class="table table-striped table-hovered">
              <thead>
                        <<th>ID</th>
                                <th>Name</th>
                                <th>Email</th>
                                <th>Roles</th>
                                <th>Actions</th>
              </thead>
              <tbody>
                        @foreach($users as $user)
                        <tr>
                            <td>{{$user->id}}</td>
                            <td>{{$user->name}}</td>
                            <td>{{$user->email}}</td>
                            <td>{{implode(',',$user->roles()->get()->pluck('name')->toArray())}}</td>
                            <td>
                            <a href="{{route('admin.users.edit',$user->id)}}"><i class="bi bi-pencil-square fw-bold text-info"></i></a>
                            <a href="#" data-bs-toggle="modal" data-bs-target="#exampleModal"><i class="bi bi-trash fw-bold text-danger"></i></a>
                   
                            </td>   
                        </tr>
                       


                        <!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Delete User</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
      <h6>Are You Sure You Want To Delete This User?</h6>
      <form action="{{ route('admin.users.destroy',$user->id) }}" method="POST">
        @csrf
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-primary">Yes, Delete</button>
      </div>
</form>
    </div>
  </div>
</div>
          
@endforeach
              </tbody>
              </table>

route

Route::prefix('admin')->name('admin.')->group(function(){
    Route::post('/delete/{id}',[UsersController::class,'destroy'])->name('users.destroy');
});

controller

public function destroy(Request $request, $id)
    {
        $user = User::findOrFail($id);
        $user->roles()->detach();
        $user->delete();        
        toastr()->success('User has been delete successfully');
        return redirect()->route('admin.users.index');
    }

Glukinho

11 months ago

Level 31

I think you have messed up html code:

<form> tags structure is wrong, opening and closing tags must be on the same level: https://prnt.sc/gxexpVpuk-d8
you create separate form and modal for each $user, this seems wrong to me. Either there should be one modal with dynamic content, or at least give them distinct ids, now all modals have id="exampleModal" and all links call the same (first?) modal: <a ... data-bs-target="#exampleModal">...</a>

What is actually inside <form> tags? Can you give generated HTML from browser?

JussiMannisto

11 months ago

Level 50

As @glukinho said, you're creating a separate modal for every user, which is weird. The id attribute is also the same for all modals, and a <div> in a <tbody> is not valid html.

tykus

11 months ago

Level 104

You can vary the content in a single modal using JS; so like the others have already said, you can remove the modal markup from the table (and loop), and passing instead the URL for the destroy endpoint:

<table class="table table-striped table-hovered">
    <thead>
        <<th>ID</th>
            <th>Name</th>
            <th>Email</th>
            <th>Roles</th>
            <th>Actions</th>
    </thead>
    <tbody>
        @foreach($users as $user)
        <tr>
            <td>{{$user->id}}</td>
            <td>{{$user->name}}</td>
            <td>{{$user->email}}</td>
            <td>{{implode(',',$user->roles()->get()->pluck('name')->toArray())}}</td>
            <td>
                <a href="{{route('admin.users.edit',$user->id)}}"><i
                        class="bi bi-pencil-square fw-bold text-info"></i></a>
                <a href="#" data-bs-toggle="modal" data-bs-target="#deleteUserModal" data-url="{{ route('admin.users.destroy',$user->id) }}">
                    <i class="bi bi-trash fw-bold text-danger"></i>
                </a>

            </td>
        </tr>
        @endforeach
    </tbody>
</table>
<!-- Modal -->
<div class="modal fade" id="deleteUserModal" tabindex="-1" aria-labelledby="deleteUserModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <form id="deleteUserConfirmation" action="" method="POST">
                @csrf
                @method('DELETE')
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="deleteUserModalLabel">Delete User</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <h6>Are You Sure You Want To Delete This User?</h6>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Yes, Delete</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    $('#deleteUserModal').on('show.bs.modal', function (event) {
        var link = $(event.relatedTarget);
        var url = link.data('url');
        var modal = $(this)
        modal.find('form.deleteUserConfirmation').attr('action', url)
    })
</script>

1 like

Please or to participate in this conversation.