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