Sweetalert: How to handle cancel button action

Created on 25 Jan 2017  ·  7Comments  ·  Source: t4t5/sweetalert

We have a callback parameter for the confirm button, but how can we use a callback for the cancel button?

Most helpful comment

You can find an example of how to do this in the documentation: http://t4t5.github.io/sweetalert/

"... and by passing a parameter, you can execute something else for 'Cancel'."

swal({
  title: "Are you sure?",
  text: "You will not be able to recover this imaginary file!",
  type: "warning",
  showCancelButton: true,
  confirmButtonColor: "#DD6B55",
  confirmButtonText: "Yes, delete it!",
  cancelButtonText: "No, cancel plx!",
  closeOnConfirm: false,
  closeOnCancel: false
},
function(isConfirm){
  if (isConfirm) {
    swal("Deleted!", "Your imaginary file has been deleted.", "success");
  } else {
    swal("Cancelled", "Your imaginary file is safe :)", "error");
  }
});

All 7 comments

I see in the code there's a doneFunction parameter.

I'm trying this code but seems my callback is ignored completely, what am I doing wrong?

(new Promise((resolve, reject) => {
  swal({
    title: "Delete data?",
    text: "Deleted data will be lost.",
    type: "warning",
    showCancelButton: true,
    confirmButtonColor: "#DD6B55",
    confirmButtonText: "Delete",
    closeOnConfirm: false,
    html: false,
    doneFunction(res) {
      if (res) {
        resolve();
      } else {
        reject();
      }
    }
  });
})).then(() => console.log("Resolved"), () => console.log("Rejected"))

Same thing for me. My callback function is called when the ok button is clicked, but not for the cancel button.

@jeffmath I switched to https://github.com/limonte/sweetalert2 to solve that

You can find an example of how to do this in the documentation: http://t4t5.github.io/sweetalert/

"... and by passing a parameter, you can execute something else for 'Cancel'."

swal({
  title: "Are you sure?",
  text: "You will not be able to recover this imaginary file!",
  type: "warning",
  showCancelButton: true,
  confirmButtonColor: "#DD6B55",
  confirmButtonText: "Yes, delete it!",
  cancelButtonText: "No, cancel plx!",
  closeOnConfirm: false,
  closeOnCancel: false
},
function(isConfirm){
  if (isConfirm) {
    swal("Deleted!", "Your imaginary file has been deleted.", "success");
  } else {
    swal("Cancelled", "Your imaginary file is safe :)", "error");
  }
});

@t4t5 Through isConfirm, we can check if the user response was Confirm button or something else. But could you please tell me how to check if the clicked button was a "Confirm" button or "Cancel" button or "Close" button because I'm using Cancel button also to redirect somewhere else but close button just closes the alert?

The actual issue is that in sweetalert v1.x the cancel handler is checking for the callback starts with function( https://github.com/t4t5/sweetalert/blob/v1.1.3/lib/modules/handle-click.js#L119.
So if that condition is not met, as @Zorgatone's example is using doneFunction( the callback is just going to be ignored.

Good catch @gualopezb. I've had this working forever and it suddenly stopped working.

Le fix:

-    }, (code) => {
+    }, function(code) {

I'm guessing some change in my Babel configuration is at play.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

krishnamraju picture krishnamraju  ·  3Comments

rapeflower picture rapeflower  ·  4Comments

waldyrious picture waldyrious  ·  5Comments

vmitchell85 picture vmitchell85  ·  6Comments

Lusitaniae picture Lusitaniae  ·  4Comments