使用模态作为模板进行编辑/删除 [英] Using a modal as template to edit/delete

问题描述

我在表中显示了一些行(每行是相关模型数据库表的一行).对于每一行，我都会显示一个按钮，其中显示一个模态，要求您确认以删除它.

I have some rows shown in a table (each one is a row of the related model database table). For each row I show a button that shows a modal asking for confirmation to delete it.

[ https://i.stack.imgur.com/tSquD. png] [1] [ https://i.stack.imgur.com/gGhSO.png] [ 2]

模式代码是刀片模板.

对于具有单行的表，我没有问题.我可以将id作为变量传递给模态.但是我不知道如何发送所选的(从逻辑上讲，包括带有$ subnet var的最后一个值的模态).

For a table with a single row, i have no problem. I can pass the id as variable to the modal. But i dont know how to send the selected one (logically, its including the modal with the last value of the $subnet var).

实现此目标的正确方法是什么?

What would be the correct way to achieve this?

...
@foreach($subnets as $subnet)
<tr>
  <td>{{$subnet->name}}</td>
  <td><button type="button" class="btn-xs btn-primary">Edit</button><button type="button" class="btn-xs btn-primary" data-toggle="modal" data-target="#deleteSubnet">Delete</button></td>
</tr>
@endforeach
@include('inc.modals.modal_deleteSubnet',['subnet' => $subnet])
...





<div class="modal fade" id="deleteSubnet" tabindex="-1" role="dialog" aria-labelledby="deleteSubnetLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="deleteSubnetLabel">Delete subnet</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <form action="/subnets/{{$subnet->id}}" method="POST">
                    @csrf
                    @method('DELETE')
                    <p>Are you sure you want to delete this subnet ({{$subnet->name}})?<p>                          
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <span class="pull-right">
                    <input class="btn btn-primary" type="submit" value="Delete">
                </span>
                </form>
            </div>
        </div>
    </div>
</div>


  [1]: https://i.stack.imgur.com/tSquD.png
  [2]: https://i.stack.imgur.com/gGhSO.png

推荐答案

您可能想检查本节在Bootstrap网站上.

You might wanna check this section on Bootstrap's website.

在您的情况下，可以将其翻译为:

In your case this could be translated to:

1. 将data-id="{{ $subnet->id }}"添加到您的按钮.

1. Add data-id="{{ $subnet->id }}" to your button.

<button type="button" class="btn-xs btn-primary">Edit</button><button type="button" class="btn-xs btn-primary" data-toggle="modal" data-target="#deleteSubnet" data-id="{{ $subnet->id }}">Delete</button>

1. 添加此jQuery代码段.

$('#deleteSubnet').on('show.bs.modal', function (event) {
      var button = $(event.relatedTarget)
      var id = button.data('id')
      var modal = $(this)
      modal.find('form').attr('action', '/subnets/' + id)
})

这篇关于使用模态作为模板进行编辑/删除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！