Im using PHP, and Sweet alert for a delete confirmation. Problem is that it is deleting before showing the sweet alert.
This is my HTML(which is using PHP in it).
<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>
This is my 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!"); } });
}
The problem is, its not showing the sweet alert, its just going straight to the URL. Do I need to do a form and prevent submits or something like that?
Advertisement
Answer
The problem is that click on anchor element has a default behavior. You could use event.preventDefault()
to prevent the redirection and navigate manually based on you logic with 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>
and in 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!"); } }); }