【问题标题】:Using sweet alert for confirmation of deletion record使用甜蜜警报确认删除记录
【发布时间】:2023-04-03 14:35:02
【问题描述】:

如何将这个正确的转换为使用甜蜜警报。

我在站点范围内使用此功能,如果使用 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;
}

提前致谢

【问题讨论】:

标签: javascript jquery sweetalert2


【解决方案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;
 }
 

【讨论】:

  • 谢谢你,我的 JavaScript 不是最好的,这个工作的盛大 Swal 真的很讨厌看到这个时代的旧提示。
  • 有道理,我不确定他们为什么要否决您的问题,这是非常有效的。我做了一点重构,你不需要 try/catch 块,因为 ajax 调用 successerror 方法会为你处理。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2015-09-17
  • 2017-01-04
  • 1970-01-01
  • 2020-11-20
  • 1970-01-01
  • 2017-07-16
  • 2023-03-08
相关资源
最近更新 更多