如何将参数传递给模态

Question

我正在尝试创建一个模式，询问用户是否愿意从表中删除记录。如果他们同意，他们会选择“删除用户”按钮，然后从数据库中删除记录。我试图将“id”的值从表传递到模态，但它不起作用。当用户单击删除时，它应该将“id”传递给模式，然后当用户确认时，它应该删除记录。我怎样才能做到这一点。这是我的代码的 sn-p。

<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>

删除用户模式

<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

从

更改您的锚标记

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

到

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

接下来在您的模式中添加form，或将提交按钮包含在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>

当你的模态显示时，你可以使用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

首先将用户的 id 添加到行中，以便可以通过脚本抓取它：

<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

在数据字段中设置 id：

<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>

在 js 中打开模态并在该模态字段中设置 id：

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

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

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

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

将按钮 id 更改为具有要删除的 id：

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

单击删除按钮时，通过 ajax 调用路由以删除该用户：

$(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) {

        }
    });

});