引导程序模态错误，不起作用“保存”按钮。 Laravel 5.8 BootStrap 3

Question

我正在Laravel中创建项目的模态。单击删除时，我已经可以使用该模式了。发生的事情是，当我单击“保存更改”以完成删除时，它什么也不做。绝对没有任何反应。我想知道正在发生什么，因为我真的不知道，我以前从未使用过模态。

这是我视图中的按钮，没有模式，它们不能完美地工作，它们可以编辑和删除，实际上，我只关心消除模式，单击时设法消除了。

<td>
                   <a href="empleados/edit/{{$key->id}}" style="width: 60%;" class="btn btn-primary">Editar</a>
                   <form action="empleados/{{$key->id}}" method="POST" class="">
                               @method('DELETE')
                               @csrf
                               <button type="button" data-toggle="modal" data-target="#delete" value="submit" style="width: 60%;" class="btn btn-primary">Eliminar</button>



                   </form>
                 </td>

我认为这是模态。

 <div class="modal modal-danger fade" id="delete">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                  <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title"></h4>
              </div>
             </div>
                 <div class="modal-body">
                <p>¿Esta seguro de eliminar este empleado?&hellip;</p>
              </div>

              <div class="modal-footer">
                <button type="button" class="btn btn-outline pull-left" data-dismiss="modal">Salir</button>
                <button type="button" id="eliminar" class="btn btn-outline">Eliminar</button>
              </div>
            </div>
            <!-- /.modal-content -->
          </div>
          <!-- /.modal-dialog -->
        </div>

Answer 1

使用模态，您必须有一些东西来处理按钮上的操作。您可以将其链接并发送到控制器，该控制器将处理删除操作，然后重定向到新页面。

或更通常，按钮将具有某种类型的javascript或AJAX方法，以获取您要删除的项目的id，并将其异步发送到服务器。服务器上的控制器将删除该项目，然后将成功消息发送回刀片页上的AJAX方法。

[[Laravel刀片页面中的AJAX方法的示例可能类似于：

 $(document).on('click', '#elminar', function () {
    var id = $(this).data('id');
            $.ajax({
                url: "{{url('yourDeleteURL')}}/" + id,
                type: "DELETE",
                data: {
                    _method: 'DELETE'
                },
                success: function () {
                    // Optional to delete the item without refreshing the page
                    $("#item" + id).remove(); 
                },
                error: function () {
                    alert('error');
                }
            });
        }
    });
});