有效使用 sweetalert 确认和取消

Question

当我点击删除按钮时，我有这段代码要运行：

$(document).on('click', '.remove', function (e) {
         e.preventDefault();
         var id = $(this).data('id');

         $.ajax({
            type: "POST",
            url: "<?php echo Yii::$app->request->baseUrl;?>"+'/todo/deletetask',
            data: {id:id},
            success: function (data) {
                var res = $.parseJSON(data);
                if(res != false) {
                    swal({
                            title: "Are you sure!",
                            type: "error",
                            confirmButtonClass: "btn-danger",
                            confirmButtonText: "Yes!",
                            showCancelButton: true,
                            },
                            function(){

                                       window.location.href = "<?php echo Yii::$app->request->baseUrl;?>/todo/index/";
                       });         
               }
            }
        });          
    });

控制器动作是：

public function actionDeletetask()
    {
        if(Yii::$app->request->isAjax)
        {
            $id = $_POST['id'];
            if($id)
                {
                    Todo::find()->where(['todo_id'=>$id])->one()->delete();    
                }

                echo json_encode(TRUE);die;
        }

        echo json_encode(FALSE);die;

    }

但是即使我点击了甜蜜的警报取消按钮，任务也会被删除，这很明显。但是我该如何防止呢？

Answer 1

就在front page of the sweetalert site 上，它显示如果您包含取消按钮，您的回调将获得一个参数，说明该操作是确认还是取消；从那个页面：

swal({
    title: "Are you sure?",
    text: "You will not be able to recover this imaginary file!",
    type: "warning",
    showCancelButton: true,
    confirmButtonColor: "#DD6B55",
    confirmButtonText: "Yes, delete it!",
    cancelButtonText: "No, cancel plx!",
    closeOnConfirm: false,
    closeOnCancel: false
}, function(isConfirm) {
    if (isConfirm) {
        swal("Deleted!", "Your imaginary file has been deleted.", "success");
    } else {
        swal("Cancelled", "Your imaginary file is safe :)", "error");
    }
});

所以接受如上所示的论点，只有当它是真的时才删除。

Answer 2

您的代码存在的问题是，当前，当您单击按钮时 - 代码会将todo/deletetask 的请求发送到您的服务器，并且只有在请求完成时（任务已删除）您向用户显示确认消息。

相反-您应该做的是在用户单击按钮时向用户显示确认消息-并且仅当用户确认删除任务时-您需要将todo/deletetask请求发送到服务器。

这是用新逻辑修复的代码：

$(document).on('click', '.remove', function (e) {
    e.preventDefault();
    var id = $(this).data('id');
    // Show the user a swal confirmation window
    swal({
            title: "Are you sure!",
            type: "error",
            confirmButtonClass: "btn-danger",
            confirmButtonText: "Yes!",
            showCancelButton: true,
        },
        function() {
            // This function will run ONLY if the user clicked "ok"
            // Only here we want to send the request to the server!
            $.ajax({
                type: "POST",
                url: "<?php echo Yii::$app->request->baseUrl;?>"+'/todo/deletetask',
                data: {id:id},
                success: function (data) {
                    var res = $.parseJSON(data);
                    if(res != false) {
                        swal("Task Deleted", "", "success")
                    }
                }
            });
        },
        function() {
            // This function will run if the user clicked "cancel"
            window.location.href = "<?php echo Yii::$app->request->baseUrl;?>/todo/index/";
        }
    );
});

Answer 3

从版本 2.x 开始，对于传递的函数，已经发生了一些变化，这将引发第二个参数的错误。而不是这个，应该使用promise 或async/await。

见：https://github.com/t4t5/sweetalert#a-warning-message-with-a-function-attached-to-the-confirm-message

此外，还弃用了showCancelButton、confirmButtonText、cancelButtonText、closeOnConfirm 等，而支持button 和buttons 对象及其选项。

见：https://sweetalert.js.org/docs/#button 和 https://sweetalert.js.org/docs/#buttons

考虑到 2.x 版中的这些变化，使用 promise 的代码应如下所示：

$(document).on('click', '.remove', function (e) {
    e.preventDefault();
    var id = $(this).data('id');
    // Show the user a swal confirmation window
    swal({
            title: "Are you sure?",
            icon: "error",
           // dangerMode: true, //set this in case the focus should be on cancel button
            buttons: [true, "Yes!"] //for detailed options see on https://sweetalert.js.org/docs/#buttons
        }).then( isConfirmed => {
            if(isConfirmed){
                // This function will run ONLY if the user clicked Yes!
                // Only here we want to send the request to the server!
                $.ajax({
                    type: "POST",
                    url: "<?php echo Yii::$app->request->baseUrl;?>" + '/todo/deletetask',
                    data: {id:id},
                    success: function (data) {
                        var res = $.parseJSON(data);
                        if(res !== false) {
                            swal("Task Deleted", "", "success")
                        }
                    }
                });
            }else{
                // This function will run if the user clicked "cancel"
                window.location.href = "<?php echo Yii::$app->request->baseUrl;?>/todo/index/";
            }
    });

});