在 laravel 5.8 上使用 swal 确认删除

Confirm delete using swal on laravel 5.8

我在用swal确认删除的时候遇到了一些问题,不知道怎么弄

这是我的 blade 查看文件:

<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 not https://sweetalert2.github.io/

我正在 laravel 5.8 上使用路线资源 谢谢!

出现循环时更新

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

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

你的 JS Click 按钮几乎是一样的。 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.
                        }
                    });
        });

使用 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>