Second swal not executed

[amiceli]

Hello,

I've this sweet-alter call :

var self = this; 

swal({
      title              : $.t('modal.clear.title') || "Etes vous sûr ?",
      text               : $.t('modal.clear.text') || "Le formulaire sera définitivement perdu !",
      type               : "warning",
      showCancelButton   : true,
      confirmButtonColor : "#DD6B55",
      confirmButtonText  : $.t('modal.clear.yes') || "Oui, supprimer",
      cancelButtonText   : $.t('modal.clear.no') || "Annuler",
      closeOnCancel      : true
}, function(isConfirm) {
   if (isConfirm){
       // I Use backbone radio event
       self.homePageChannel.trigger('deleteForm', self.currentSelectedForm)
   }
});

In the callback I send a an event with backbone radio.
At this point all is good.

And in my event response i want to display an another sweet alert like this :

formDeleted : function(result) {
        swal({
            title : $.t('modal.deleted.title') || 'Formulaire supprimé !',
            text  : $.t('modal.deleted.text') || 'Votre formulaire a été supprimé avec succès',
            type  : "success",
        });
  },

And the second sweet alert doesn't appear.
And i'm sure formDeleted function is executed.

Thanks for your help

[dhyegocalota]

Could you try to show us your code in a JSFiddle?

[amiceli]

I've created a JSFiddle : http://jsfiddle.net/5pj7wwx9/

When I click on the button the first sweetAlert is shown, the callback is called but the second sweetAlert no.

You will see in the JSFiddle i've tried with a setTimeout, it works after 2 seconds

[dmill-bz]

I'm having this same issue. Willing to provide any information needed to sort this.

[maddy2308]

+1 to the resolve required for the issue

[dmill-bz]

incase this helps anyone. In my case I was able to sort this out by setting closeOnCancel and/or closeOnConfirm to false. Thus preventing the closing of the second alert box. The second swal call can set them to true.

[maddy2308]

That is not a correct behavior, we shouldn't depend on what the value of closeOnCancel and closeOnConfirm is.

[dmill-bz]

I agree, but it might be the intended purpose of closeOnConfirm since that's also how it is portrayed in the swal examples that open a second box (http://tristanedwards.me/sweetalert)
I still agree it's definitely non intuitive.

[maddy2308]

for me even that is not working. You can take a look at the fiddle I created. https://jsfiddle.net/madhureng/5pj7wwx9/16/

I will be more than happy that it gets fixed rather than api taking decision for me.

[joenorton]

@maddy2308 - you have too many clicks going on. It does work.
Check out this fiddle: https://jsfiddle.net/g8j1acv4/

Only thing I changed was took out your first document.click and changed it to document.ready.

[t4t5]

As @joenorton points out, this is what closeOnConfirm: false is for. I do agree that it is a little unintuitive though, so if anyone has a solution to the problem, I'd be glad to add it!

@maddy2308, the problem with your fiddle is that $('button') is too ambiguous, so the swal's buttons are also invoked. If you change it too $('body > button') it should work.

[StephanBijzitter]

I also suffered from this issue, and I do believe this needs to be changed.

@t4t5 Without looking at the source code, we can assume the following:

the first swal is shown at point A in time
the user interacts with the first swal at point B in time
the callback is called and invokes the second swal at point C in time
the active swal is dismissed at point D in time

An easy solution to solve this issue would be as follows:

@A: An integer variable is set that increases with every call to swal
@B: The current value of the variable is remembered
@D: If the variable has changed, do not call swal.close

This will allow C to invoke any amount of new dialogs, with very little modification needed to the current codebase.

[theophilebodin]

I had the same issue, got it solved by added a $timeout on the confirm action (with Angular)
if (isConfirm){ return $timeout(function() { // I Use backbone radio event self.homePageChannel.trigger('deleteForm', self.currentSelectedForm) }, 100); }

[iget-master]

This bug occurs with me too in following situation:

1. Call a confirmation sweet alert that triggers an $http request on angular
2. Force $http request imediate failure by setting throttling to offline on Chrome's developer tools.
3. Call an error sweet alert on $http failure.

The first confirmation alert will show fine, but the error alert will not show.

Note: I didn't dived into the code, but looks like the close animation on any existing sweet alert should be cancelled and it should be immediately destroyed, then the 2nd alert will show fine.

---

Edit: As I expected, the problem is with the first sweet alert confirmation. Setting animation to false on first swal stops the problem. But it looks like a BUG for me, because I might want the animation enabled in case of the error don't occours.

I propose two solutions:

1st: If a second alert is called while an existent alert is being animated off, stop the animation process, close immediately the current alert and show the new one.

2nd: Queue the second alert to be opened when the close animation finish.

The 2nd solution should make things smoother, while the 1st solution make the error modal appears faster!

I'll try to do a pull request, but I never contributed on this project before, if someone knows where to fix, feel free to make the pull request first! :)

[iget-master]

@t4t5 Please take a look on my report and solutions, if you approve I can do the fix!

[Arpi123]

You can use querySelectorAll , it returns all elements, so you canloop over the returned values

var alertBtn = document.querySelectorAll('.js-alert');

for (var i = 0; i < alertBtn.length; i++) {
    alertBtn[i].onclick = function(){
        swal({
            title: "text",
            text: "text text"
            });
    };
}

[santiagolucas]

Had the same problem with my SweetAlert, when the second swal should appear, they don't, i just get error in my console, solved by including a $timeout in my function.

function(error) { console.log(error); $timeout(function(){ SweetAlert.error('Erro'); },100) }

[kamgasimo]

I had the same problem but solution of @PommeVerte solved it. I needed to set closeOnCancel: false to the parent swal().

[t4t5]

As of SweetAlert 2.0, closeOnConfirm and closeOnCancel are no longer needed to chain SweetAlerts. Just use promises! :)

[Lufffya]

SetTimeout can solve the problem after the callback, but I'd like to know more about the cause of the problem.

[ArifurKhan]

tried two things which solved my problem.

1. close the first swal by swal.close();
2. add setTimeout to call the second swal

[darryljansm]

incase this helps anyone. In my case I was able to sort this out by setting closeOnCancel and/or closeOnConfirm to false. Thus preventing the closing of the second alert box. The second swal call can set them to true.

This worked to me. Thanks!