Sweet Alert Delete Confirmation with a href

Question

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?

ev.target.offsetParent.children[0].href <---- for anyone else with a problem this is the way to get the URL that PHP printed out. — James, Feb 09 '19 at 06:58

score 7 · Accepted Answer · edited Nov 25 '22 at 13:10

7

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

edited Nov 25 '22 at 13:10

Ishtiaq Ahmed

126
1
11

answered Feb 09 '19 at 06:05

Dhananjai Pai

5,914
1
10
25

Thanks, that worked for showing the message. But I face the problem that every URL is unique because they contain the user_id from PHP. I cant generate PHP with Js – James Feb 09 '19 at 06:16
@James you can get the href value and store it in some variable and use it to redirect. Will update the answer now. – Dhananjai Pai Feb 09 '19 at 06:19
@James feel free to accept the answer if it solves your problem (the grey tick below the voting arrows) for future reference – Dhananjai Pai Feb 09 '19 at 06:24
Its now redirecting to null, is that because it cant read the PHP maybe? – James Feb 09 '19 at 06:28
try currentTarget and check the url by console.log. Updated code above – Dhananjai Pai Feb 09 '19 at 06:41
1

after messing with the console.log I found where the href was. ev.target.offsetParent.children[0].href , and with your code it works perfect. Thanks alot man, this was my first stack question and it was great haha thanks. – James Feb 09 '19 at 06:52
Happy to help @James – Dhananjai Pai Feb 09 '19 at 06:53

score 0 · Answer 2 · 2020-08-14T10:46:29.057

You can add the value javascript: in the href attribute, like this

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

score -1 · Answer 3 · answered Feb 09 '19 at 06:06

Try removing the href from the link and only handle the link when user click confirmed in the SweetAlert script.

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

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

Sweet Alert Delete Confirmation with a href

3 Answers3

Linked