[英]Sweet Alert Delete Confirmation with a href
我使用 PHP 和 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>
这是我的甜蜜警报
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。 我需要做一个表格并防止提交或类似的东西吗?
问题是点击锚元素有一个默认行为。 您可以使用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!");
}
});
}
您可以在 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>
尝试从链接中删除 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!");
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.