Question

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

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

        }
    });

});

如何将参数传递给模态

3 个答案: