[FIXED] (Laravel) Confirmation modal on delete button

Issue

I have a view which display a table of users from the database and the last column has delete button on it which currently work fine for me but i want to display confirmation model and when the user click on Delete button it will delete the selected use

This is the current code for delete button which is work fine:

<a href="{{ route('deleteUser', ['user_id' => $user->id]) }}"><button type="button" class="btn mr-0 mb-0 btn-outline-primary btn-sm"><i class="icon-trash3"></i></button></a>

Now i used this modal which i have to click on delete button in order to delete the selected user

<div class="modal fade text-xs-left" id="iconModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="myModalLabel2"><i class="icon-warning2"></i> Confirmation Message</h4>
            </div>
            <div class="modal-body">
                <p>Are you sure that you want to <strong>Delete</strong> this user ?</p>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn grey btn-outline-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-outline-primary">Delete</button>
            </div>
        </div>
    </

Solution

You do not need to generate a modal for each users. Just build a single modal and use data- attributes for dynamic parts.

So, as minimal, use data- attribute for every button, e.g. data-user-id="{{ }}" to use in form action:

<a href="#" class="btn mr-0 mb-0 btn-outline-primary btn-sm" data-toggle="modal" data-target="#deleteUserConfirmation" data-user-id="{{ $user->id }}"><i class="icon-trash3"></i></a>

In the modal window use a form with delete method:

<form id="deleteUserForm" method="POST">
{{ method_field("DELETE") }}
<button class="btn btn-danger" type="submit">DELETE</button>
</form>

In script use:

<script>
  $('#deleteUserForm').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget);
  $('#deleteUserForm').attr('action', '/user/' + button.data('user-id'));
});
</script>

In route use:

Route::delete('/user/{user}', 'UserController@destroy');

P.S. You may also use other data attributes ti use dynamically e.g. data-user-name="{{ }}" to show the user's name will be deleted.

Answered By - Murat Tutumlu