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

您的代码存在的问题是，当前单击按钮时代码会将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 2

就在那里的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"); 
    } 
}); 

所以接受参数如上图所示，只有做删除，如果是truthy。