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]

The modal code is a blade template.

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

回答1:

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

In your case this could be translated to:

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>

Add this jQuery snippet.

$('#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)
})

回答2:

In your form add a bind id

@foreach($subnets as $subnet)
<tr>
  <td>{{$subnet->name}}</td>
  <td>
    <button type="button" class="btn-xs btn-primary" data-id="{{$subnet->id}}">Edit</button>
    <button type="button" class="btn-xs btn-primary" data-id="{{$subnet->id}}" data-toggle="modal" data-target="#deleteSubnet">Delete</button>
  </td>
</tr>
@endforeach

Add a "id" in your form to get in jquery. <form method="POST id="formId">

$(document).ready(function () {
    // you can add a better validation to button like a ID or class
    $("button").each(function () {
        $(this).onClick(function () {
            var action = "/subnets/" + $(this).data().id;
            $("#formId").attr("action", action);
        });
    });
});

回答3:

Without any javascript workarounds:

<button ...  data-target="#deleteSubnet-{{ $subnet->id }}">Delete</button>
         ....

<div class="modal fade" id="deleteSubnet-{{ $subnet->id }}" ... >
         ....
</div>

Should work fine

来源：https://stackoverflow.com/questions/57465603/using-a-modal-as-template-to-edit-delete

标签

php

laravel

bootstrap-modal

laravel-blade