Sweet Alert带有a href的删除确认

Question

我正在使用PHP和Sweet Alert进行删除确认。问题在于它在显示Sweet Alert之前就已经删除了。

这是我的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>

这是我的Sweet Alert

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

问题是，它没有显示出Sweet Alert，直接跳转到了URL。我需要做一个表单并防止提交或者做其他的处理吗？

- James

---

ev.target.offsetParent.children[0].href <---- 对于其他有问题的人，这是获取PHP打印出的URL的方法。 - James

Answer 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>

在 JavaScript 中：

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

- Dhananjai Pai

---

@James 你可以获取 href 值并将其存储在某个变量中，然后使用它进行重定向。我现在会更新答案。 - Dhananjai Pai

@James 如果这个答案解决了你的问题，可以点击下方投票箭头旁边的灰色勾选标志来接受它，以备将来参考。 - Dhananjai Pai

现在正在重定向到 null，这是因为它可能无法读取 PHP 吗？ - James

在调试 console.log 之后，我找到了 href 的位置：ev.target.offsetParent.children[0].href。使用你的代码，它完美地运行了。非常感谢，这是我的第一个 stack 问题，太棒了哈哈，谢谢。 - James

很高兴能帮助你，@James - Dhananjai Pai

Answer 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>

- user13684022

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

- Kmye