在 laravel 5.8 上使用 swal 确认删除答案

【问题标题】：Confirm delete using swal on laravel 5.8在 laravel 5.8 上使用 swal 确认删除
【发布时间】：2019-09-18 03:45:18
【问题描述】：

我在使用swal确认删除时遇到了一些麻烦，我不知道如何使它工作

这是我的刀片视图文件：

<form action="{{ route('user.destroy', $us->id)}}" method="post">
        @method('DELETE')
        @csrf
        <input class="btn btn-danger" type="submit" value="Delete" />
</form>

以及使用 swal 的脚本

  <script>
        //== Class definition
        var SweetAlert2Demo = function() {

            //== Demos
            var initDemos = function() {
                $('.btn-danger').click(function(e) {
                    e.preventDefault();
                    swal({
                        title: 'Are you sure?',
                        text: "You won't be able to revert this!",
                        type: 'warning',
                        buttons:{
                            confirm: {
                                text : 'Yes, delete it!',
                                className : 'btn btn-success'
                            },
                            cancel: {
                                visible: true,
                                className: 'btn btn-danger'
                            }
                        }
                    }).then((Delete) => {
                        if (!Delete) {
                           e.preventDefault();
                        }
                    });
                });
            };

            return {
                //== Init
                init: function() {
                    initDemos();
                },
            };
        }();

        //== Class Initialization
        jQuery(document).ready(function() {
            SweetAlert2Demo.init();
        });
    </script>

swal 的版本是https://sweetalert.js.org 而不是https://sweetalert2.github.io/

我在 laravel 5.8 上使用路由资源谢谢你！

【问题讨论】：

swal 不工作？？
我的问题是删除按钮与swal结合时我不知道如何处理。

标签： php laravel-5.8 sweetalert

【解决方案1】：

出现循环时更新

你应该给你的表单一个id，然后在swal回调中使用ID提交表单

<form action="{{ route('user.destroy', $us->id)}}" method="post" id="yourFormId">

您的 JS 单击按钮几乎相同。只是 Swal JS 回调方法的一些小改动

        $('.btn-danger').click(function(e) {
                var $form =  $(this).closest("form"); //Get the form here.
                e.preventDefault();
                   swal({
                        title: 'Are you sure?',
                        text: "You won't be able to revert this!",
                        type: 'warning',
                        buttons:{
                            confirm: {
                                text : 'Yes, delete it!',
                                className : 'btn btn-success'
                            },
                            cancel: {
                                visible: true,
                                className: 'btn btn-danger'
                            }
                        }
                    }).then((Delete) => {
                        console.log(Delete); //This will be true when delete is clicked
                        if (Delete) {
                           $form.submit(); //Submit your Form Here. 
                           //$('#yourFormId').submit(); //Use same Form Id to submit the Form.
                        }
                    });
        });

【讨论】：

感谢您的帮助，它确实有效。但是，如果我有很多记录，它总是会删除我表中的第一条记录，因为我使用 for 循环来创建用户表，因此所有表单都将具有相同的 id。你有解决这个问题的理想吗？
@TùngNguyễn 我已经更新了循环的答案。在这种情况下，您不需要指定表单的 id。注意我是如何在 JS 中使用$form

【解决方案2】：

使用 GET 方法而不是 POST。并且无需使用按钮或组合任何东西。试试这个例子，它总是适用于我的所有项目。作为使用锚标签，不是按钮

<a class="btn btn-action text-danger" title="Delete" data-toggle="tooltip" onclick="deletefunction({{$your_id}})"><i class="fa fa-trash"></i></a>

将脚本添加为，

<script>
var deletefunction = function(id){
        swal({ 
            title: "Are you sure you want to Delete this?",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#DD6B55",
            confirmButtonText: "Yes",
            closeOnConfirm: false,
            preConfirm: function(result) {
                window.location.href = '{{url('/your_route/delete')}}/'+id;
            },
            allowOutsideClick: false
        });
    };
</script>

【讨论】：