有效地使用 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;

    }

但是即使我点击甜蜜警报取消按钮，任务也被删除了，这就是obvious.but我该如何防止它？

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 and 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/";
            }
    });

});

有效地使用 sweetalert 确认和取消

Effectively using sweetalert confirm and cancel

jquery

sweetalert