带有 href 的 Sweet Alert 删除确认答案

【问题标题】：Sweet Alert Delete Confirmation with a href带有 href 的 Sweet Alert 删除确认
【发布时间】：2019-02-09 05:57:53
【问题描述】：

我正在使用 PHP，并使用 Sweet 警报进行删除确认。问题是它在显示甜蜜警报之前正在删除。

这是我的 HTML（其中使用了 PHP）。

<div class="delete"><a onclick="return confirmation()" href="'.URLROOT.'/dashboards/delete_note/'.htmlspecialchars($note->note_id).'/'.$data['table'] .'"><i class="far fa-trash-alt"></i></a></div>

这是我的甜蜜提醒

function confirmation() {
swal({
  title: "Are you sure?",
  text: "Once deleted, you will not be able to recover this imaginary file!",
  icon: "warning",
  buttons: true,
  dangerMode: true,
})
.then((willDelete) => {
  if (willDelete) {
    swal("Poof! Your imaginary file has been deleted!", {
      icon: "success",
    });
  } else {
    swal("Your imaginary file is safe!");
  }
});

}

问题是，它没有显示甜蜜警报，它只是直接进入 URL。我需要做一个表格并防止提交或类似的东西吗？

【问题讨论】：

ev.target.offsetParent.children[0].href

标签： javascript php sweetalert

【解决方案1】：

问题是点击锚元素有一个默认行为。您可以使用event.preventDefault() 来防止重定向并根据您的逻辑手动导航window.location.href='url'

<div class="delete"><a onclick="confirmation(event)" href="'.URLROOT.'/dashboards/delete_note/'.htmlspecialchars($note->note_id).'/'.$data['table'] .'"><i class="far fa-trash-alt"></i></a></div>

在js中

function confirmation(ev) {
ev.preventDefault();
var urlToRedirect = ev.currentTarget.getAttribute('href'); //use currentTarget because the click may be on the nested i tag and not a tag causing the href to be empty
console.log(urlToRedirect); // verify if this is the right URL
swal({
  title: "Are you sure?",
  text: "Once deleted, you will not be able to recover this imaginary file!",
  icon: "warning",
  buttons: true,
  dangerMode: true,
})
.then((willDelete) => {
  // redirect with javascript here as per your logic after showing the alert using the urlToRedirect value
  if (willDelete) {
    swal("Poof! Your imaginary file has been deleted!", {
      icon: "success",
    });
  } else {
    swal("Your imaginary file is safe!");
  }
});
}

【讨论】：

谢谢，这对显示消息很有用。但是我面临的问题是每个 URL 都是唯一的，因为它们包含来自 PHP 的 user_id。我不能用 Js 生成 PHP
@James 您可以获取 href 值并将其存储在某个变量中并使用它来重定向。现在将更新答案。
@James 如果它解决了您的问题，请随时接受答案（投票箭头下方的灰色勾号）以供将来参考
它现在重定向到null，是不是因为它可能无法读取PHP？
在弄乱了 console.log 之后，我找到了 href 所在的位置。 ev.target.offsetParent.children[0].href ，并且使用您的代码可以完美运行。非常感谢，这是我的第一个堆栈问题，非常感谢。

【解决方案2】：

你可以在 href 属性中添加值javascript:，像这样

<a href = 'javascript:
    swal({
  title: "Delete selected item?",
  text: "Unrecoverable Data",
  icon: "warning",
  buttons: true,
  dangerMode: "true",
})
.then((willDelete) => {
  if (willDelete) {
   swal({ title: "Delete Data Successfully",
 icon: "success"}).then(okay => {
   if (okay) {
    window.location.href = "";
  }
});
    
  } else {
    swal({
    title: "Data Not Deleted",
     icon: "error",
    
    });
  }
});'
class = "btn btn-danger">Delete</a>

【讨论】：

【解决方案3】：

尝试从链接中删除 href 并仅在 SweetAlert 脚本中确认用户单击时处理链接。

<div class="delete"><a onclick="return confirmation()"><i class="far fa-trash-alt"></i></a></div>

在你的 javascript 中：

function confirmation() {
swal({
  title: "Are you sure?",
  text: "Once deleted, you will not be able to recover this imaginary file!",
  icon: "warning",
  buttons: true,
  dangerMode: true,
})
.then((willDelete) => {
  if (willDelete) {

    // TODO: Handle your delete url by ajax
    // ...

    swal("Poof! Your imaginary file has been deleted!", {
      icon: "success",
    });
  } else {
    swal("Your imaginary file is safe!");
  }
});

【讨论】：