使用甜蜜警報確認刪除記錄

Question

我如何將這個正確的轉換為使用甜蜜警報。

我在站點范圍內使用此 function 並且使用 sweetalert2 而不是通用的 javascript 警報會很好。

https://sweetalert2.github.io/

jQueryAjaxDelete = form => {     
 if (confirm('Are you sure to delete this record ?')) {
    try {
        $.ajax({
            type: 'POST',
            url: form.action,
            data: new FormData(form),
            contentType: false,
            processData: false,
            success: function (res) {
                $('#view-all').html(res.html);
            },
            error: function (err) {
                console.log(err)
            }
        })
    } catch (ex) {
        console.log(ex)
    }
}

  //prevent default form submit event
  return false;
}

提前致謝

Answer 1

使用 Sweetalert 創建一個新的確認提示，並在您的 if 條件中刪除 vanilla js 確認提示。 如果確認為真，則進行刪除 ajax 調用。

請參閱下面的代碼

jQueryAjaxDelete = form => {
  // Modify as you wish
  const sweetOptions = {
    title: "Delete",
    text: "Are you sure  you want to delete this record?",
    type: "warning",
    showCancelButton: true,
    confirmButtonText: "Yes!",
    cancelButtonText: "Cancel!",
    closeOnConfirm: false,
    closeOnCancel: false 
  }
  
  swal(sweetOptions, (isConfirmed) => {
    if (isConfirmed) {
      $.ajax({
          type: 'POST',
          url: form.action,
          data: new FormData(form),
          contentType: false,
          processData: false,
          success: function (res) {
              $('#view-all').html(res.html);
              
              // Fire a delete alert with SweetAlert here
              swal("Deleted!", "Deleted!", "success");
          },
          error: function (err) {
              console.log(err)
              swal("Cancelled", "Delete failed", "error");
          }
      })
    } else {
        swal("Cancelled", "Delete cancelled", "error");
    }
  }
   //prevent default form submit event
   return false;
 }