如何将参数传递给模态

Question

I am trying to create a modal which asks the users if they are willing to delete a record from the table. If they agree, they select the 'delete user' button and the record is deleted from the database. I have tried to pass the value of the 'id' from the table to the modal but it doesn't work. When a user clicks on delete, it should pass the 'id' to the modal and then when the user confirms, it should delete the record. How can I achieve this. Here is a snippet of my code.

<div class="box-body">
    <table id="example2" class="table table-bordered table-hover">
        <thead>
            <tr>
                <!-- <th></th> -->
                <th>Username</th>
                <th>Contact</th>
                <th>Email</th>
                <th>Role Type</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            @foreach ($data as $datas)
            <tr>
                <td>{{ $datas->name }}</td>
                <td>{{ $datas->contact }}</td>
                <td>{{ $datas->email }}</td>
                <td>Role Type</td>
                <td>
                    <div class="btn-group">
                        <a href="" data-toggle="modal" data-target="#edit-modal"><i class="fa fa-edit" title="Edit"></i></a>
                        <a href="/delete/{{ $datas->id }}" data-toggle="modal" data-target="#delete-modal"><i class="fa fa-trash" title="Delete"></i></a>
                    </div>
                </td>
            </tr>
            @endforeach
        </tbody>
    </table>

Delete User Modal

<div class="modal fade" id="delete-modal">
    <div class="modal-dialog">
        <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" align="center"><b>Delete User</b></h4>
            </div>
            <div class="modal-body">
                <h4 align="center">Are you sure you want to delete this user?</h4>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-danger">Delete User</button>
            </div>
        </div>
    </div>
</div>

Answer 1

Change your anchor tag from

<a href="/delete/{{ $datas->id }}" data-toggle="modal" data-target="#delete-modal">
    <i class="fa fa-trash" title="Delete"></i>
</a>

to

<a href="#" data-href="/delete/{{ $datas->id }}" data-toggle="modal" data-target="#delete-modal">
    <i class="fa fa-trash" title="Delete"></i>
</a>

Next in your modal, add a form , or enclose the submit button within a form

<div class="modal-footer">
<button type="button" class="btn btn-default pull-left" data-dismiss="modal">Close</button>
<form id="deleteResource" method="post">
    {{ csrf_field() }}
    {{ method_field('DELETE') }}
    <button type="submit" class="btn btn-danger">Delete User</button>
</form>
</div>

and while your modal is being shown, you could make use of event.relatedTarget

$('#delete-modal').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget); // Button that triggered the modal
    var href = button.data('href'); // Extract info from data-* attributes
    $("#deleteResource").attr('action', href);
});

Answer 2

Start with adding the user's id to the row so it can be grabbed via script:

<div class="btn-group">
    <a href="" data-toggle="modal" data-target="#edit-modal"><i class="fa fa-edit" title="Edit"></i></a>
    <a href="#" class="delete-btn" id="{{ $datas->id }}" data-toggle="modal" data-target="#delete-modal"><i class="fa fa-trash" title="Delete"></i></a>
</div>

// add a hidden form to the modal
<form id="delete-user-form" method="post" action="">
   {{ csrf_field() }}
   {{ method_field('delete') }}
</form>

// add a script to grab the user's id from the row clicked, set
// the form's action and another event listener for the confirm delete click
<script>
  document.querySelector('.delete-btn').forEach(el => {
    var userId = el.id
    el.addEventListener('click', e => {
      var form = document.getElementById('delete-user-form')
      form.setAttribute('action', '/users/' + userId)
      var btn = document.querySelector('.modal-footer .btn-danger')[0]
      var listener = () => { form.submit(); btn.removeEventListener(listener) }
      btn.addEventListener('click', listener)
  })
</script>

Answer 3

set the id in data field:

<a href="/delete/{{ $datas->id }}" data-toggle="modal" class=".delete" data-id="{{ $datas->id }}" data-target="#delete-modal"><i class="fa fa-trash" title="Delete"></i></a>

In js open the modal and set id in that modal field:

$(document).on("click", ".delete", function () {

        var delid = $(this).data('id');

        $('#deleteThis').data('deleteThis', delid); //setter        

        $('#delete-modal').modal('show');
    });

change the button id to have the id to delete :

<button type="button" id="deleteThis" class="btn btn-danger">Delete User</button>

on click of delete button call a route via ajax to delete that user:

$(document).on("click", "#deleteThis", function(){
    var id = $(this).data("deleteThis");
    loaderShow();
    $.ajax(
    {
        url: "delete/"+id,
        type: 'POST',
        data: {
            "id": id,
            "_method": 'DELETE',
        },
        success: function (data)
        {

            $('#delete-modal').modal('hide');

        },
        error: function(data) {

        }
    });

});