CODEWITHSUNDEEP
javascriptlaravelbootstrap-modal
hushhush
hushhush

Reputation: 157

Delete data with confirmation modal

I want to delete selected data with confirmation modal but somehow it only deletes the latest data not the selected data. Maybe there's something with the JavaScript logic but I can't seem to find anything wrong. Here's my full code:

Controller:

public function destroy($id) {
    User::find($id)->delete();

    return redirect('usercontrol')->with('status', 'User successfully deleted!');
}

View:

<tbody>
    @foreach ($users as $user)
        <tr>
            <th scope="row">
                {{ $user->id }}
            </th>
            <td>
                {{ $user->first_name }} {{ $user->last_name }}
            </td>
            <td>
                {{ $user->email }}
            </td>
            <td>
                {{ $user->role }}
            </td>
            <td>
                {{ $user->created_at }}
            </td>
            <td>
                <a href="users/{{ $user->id }}/edit" class="badge btn-success">
                    <i class="fas fa-edit" style="color:white"></i>
                </a>
                <a href="{{ '#' }}" class="delete-modal badge btn-danger" data-value="{{ $user->id }}" data-toggle="modal" data-target="#exampleModal">
                    <i class="fas fa-trash-alt" style="color:white"></i>
                </a>
            </td>
        </tr>
    @endforeach
</tbody>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-sm">
        <div class="modal-content shadow-sm">
            <form action="/users/{{ $user->id }}" method="POST" class="d-inline">
                @method('delete')
                @csrf
                <div class="modal-body">
                    <h3 class="text-center">Are you sure?</h3>
                </div>
                <div class="modal-footer justify-content-around pt-0 border-top-0">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-danger" name="delete_user">Delete</button>
                </div>
            </form>
        </div>
    </div>
</div>

JavaScript:

$(document).ready(function (e) {
    $(document).on("click", ".delete-modal", function (e) {
        var delete_id = $(this).attr('data-value');
        $('button[name="delete_user"]').val(delete_id);
    });
});

Upvotes: 2

Views: 4498

Answers (5)

ParisaN
ParisaN

Reputation: 2092

First, you did not name data-target="#exampleModal" it correctly. You must also enter the value of $user->id. Change it to data-target="#exampleModal{{ $user->id }}". Like this:

<a href="{{ '#' }}" class="delete-modal badge btn-danger" data-value="{{ $user->id }}" data-toggle="modal" data-target="#exampleModal{{ $user->id }}">

Secondly, You should put modal code in loop:

@foreach ($users as $user)
    <div class="modal fade" id="exampleModal{{ $user->id }}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-sm">
            <div class="modal-content shadow-sm">
                <form action="/users/{{ $user->id }}" method="POST" class="d-inline">
                    @method('delete')
                    @csrf
                    <div class="modal-body">
                        <h3 class="text-center">Are you sure?</h3>
                    </div>
                    <div class="modal-footer justify-content-around pt-0 border-top-0">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-danger" name="delete_user">Delete</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endforeach

Also pay attention to id tag: id="exampleModal{{ $user->id }}"

Upvotes: 1

zahid hasan emon
zahid hasan emon

Reputation: 6233

you are not updating the form action for each row. so the last row is getting deleted as the form action is /users/{{ $user->id }}, the last user from the for loop. change the form action on button click

$(document).on("click", ".delete-modal", function (e) {
    var delete_id = $(this).data('value');
    $('#delete_form').attr('action', '/users/' + delete_id);
});

and add an id to the form

<form id="delete_form" method="POST" class="d-inline">

and use some descriptive name for url like users/delete/id

Upvotes: 0

Aless55
Aless55

Reputation: 2709

The problem is that your modal is outside of your for loop and that you are trying to access the $user variable in your modal. At this point in time the $user variable contains the last element of your for loop, because your loop has already iterated. That is the reason why you are always deleting your last user.

There are 2 options:

  1. Put your Modal code into your loop (this will create a modal for each entry)
  2. It is good practice to only have one modal and change the values dinamically (like you wanted to do). But for that you will have to pass/build the correct delete URL in your on click method

Give your form an id like id="delete-form" afterwards in your onclick method you can set the action dinamically:

$('#delete-form').attr('action', '/users/' + delete_id);

Upvotes: 1

Taur
Taur

Reputation: 564

You use the $user variable outside the for loop to see your form <form action="/users/{{$user->id}}" ...

In php, the last instance of the foreach loop is always outside of scoope, which is why you don't get an error.

So you have to pass it to the dinamile using javascript.

Upvotes: 0

Rajen Trivedi
Rajen Trivedi

Reputation: 1302

You need to modify action part of your delete modal form, for that your HTML & jQuery code should be as below:

HTML Code:

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
                    <div class="modal-dialog modal-dialog-centered modal-sm">
                        <div class="modal-content shadow-sm">
                            <form action="#" id="deleteUserForm" method="POST" class="d-inline">
                                @method('delete')
                                @csrf
                                <div class="modal-body">
                                    <h3 class="text-center">Are you sure?</h3>
                                </div>
                                <div class="modal-footer justify-content-around pt-0 border-top-0">
                                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                    <button type="submit" class="btn btn-danger" name="delete_user">Delete</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

jQuery Code:

$(document).ready(function (e) {
        $(document).on("click", ".delete-modal", function (e) {
            var delete_id = $(this).data('value);
            $('#deleteUserForm"]').attr('action', 'users/'+data_id);
            $('#deleteUserForm"]').submit();
        });
    });

Upvotes: 0

Related Questions