effektiv sweetalert bestätigen mit und Abbrechen

Question

ich diesen Code ausführen müssen, wenn ich auf die Schaltfläche Löschen klicken:

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

und die Controller-Aktion ist:

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; 

    } 

aber auch wenn ich die süße alert klicken Abbrechen-Taste, die Aufgabe wird gelöscht, was offensichtlich ist. Aber wie kann ich es verhindern?

Answer 1

Das Problem, das Sie mit Ihrem Code haben ist, dass derzeit, wenn Sie auf die Schaltfläche klicken - der Code wird die Anfrage von todo/deletetask an Ihren Server senden, und nur wenn die Anfrage erledigt ist (die Aufgabe wurde gelöscht) Sie zeigen der Benutzer die Bestätigungsnachricht.

Stattdessen - was Sie tun sollten ist, zeigen Sie dem Benutzer die Bestätigungsmeldung, wenn er auf die Schaltfläche klickt - und nur wenn der Benutzer das Löschen der Aufgabe bestätigt hat - müssen Sie die todo/deletetask Anfrage an den Server senden.

Hier wird der Code mit der neuen Logik festgelegt:

$(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

Genau dort auf der front page of the sweetalert site zeigt es, dass, wenn Sie einen Abbrechen-Button enthalten, Ihr Rückruf ein Argument erhält, das sagt, ob die Aktion bestätigt oder abgebrochen wurde; von dieser Seite:

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

Also akzeptieren Sie das Argument wie oben gezeigt und nur die Löschung tun, wenn es truthy ist.