How to listen for when sweet alert closes

Question

I am currently working with sweetalert2 and I am trying to detect when the alert closes. However the DeleteUnsavedImages function is not firing. I thought that assigning the function to the onclose key would work but no luck.

   swal({
       html: data,
       showCloseButton: false,
       showCancelButton: false,
       width: 800,
       showConfirmButton: false,
       onClose: DeleteUnsavedImages()
   }).then(function () {

   });


function DeleteUnsavedImages(){
    var test = "-1";
}

Any help would be appreciated :-)

Shinto

Try removing the (), onClose: DeleteUnsavedImages – Relegate

Answer 1

I tested with my sweet alert to confirm the issue, you just need to pass the function name without () and the function will be called inside onClose event handler of swal. Its called passing a reference of the function to call when onClose gets fired of swal.

Make a little change like this:

   swal({
       html: data,
       showCloseButton: false,
       showCancelButton: false,
       width: 800,
       showConfirmButton: false,
       onClose: DeleteUnsavedImages        // Removed () from here
   }).then(function () {

   });


   function DeleteUnsavedImages(){
       var test = "-1";
   }

Xerophyte

You're not calling the function DeleteUnsavedImages. You're providing a reference to a function, which is then called when the alert closes. – Ignescent

yes, Its called passing a reference of the function to call when onClose gets fired of swal. – Xerophyte

Yes, I know. But your answer says: you just need to call the function without (), which is incorrect. You're not calling the function. You're passing a reference to a function. – Ignescent

Going to update my comment in answer so it will make the concept clear. Thanks for mentioning it @fubar. – Xerophyte

wouldn't be enough to use the "then(..)" statement instead of the onClose property? – Freda

@vivoconunxino .then() won't run on modal close. – Euthenics

I had a problem with IE11 and Swal2 (IE11 showed syntax error in console). The reason was ,that IE11 DON'T support =>. I had: onClose: () => (window.history.back()) in code and for IE11 support had to create a function function BrowserBack() { history.back(1); } and change the code to: onClose: BrowserBack (hope this helps somebody. – Westmorland

Answer 2

swal({
     html: data,
     showCloseButton: false,
     showCancelButton: false,
     width: 800,
     showConfirmButton: false,
     onClose: () => {
         this.DeleteUnsavedImages();
     }
})

private DeleteUnsavedImages(){
}

Claqueur

Answer 3

swal({
    title: "client",
    content: html,
    buttons:
    {
        cancel: {
            text: "Close",
            visible: true,
            closeModal: true,
        },
        confirm: {
            text: "Download",
            visible: true,
            closeModal: false
        }
    },
}).then((confirm) => {
    if (confirm) {
        download();
    }
    else {
        DeleteUnsavedImages();
    }
});

function DeleteUnsavedImages(){
    var test = "-1";
}

Robbins

Please don't post only code as an answer, but also provide an explanation of what your code does and how it solves the problem of the question. Answers with an explanation are usually more helpful and of better quality, and are more likely to attract upvotes. – Multilateral

Answer 4

OnClose: is replaced with willClose: Refer to Sweetalert documentation.

Swal.fire({
    showCloseButton: true,
    willClose: () => {
    location.reload();
  }
 });

Barncard