Sweetalert: Multiple Sweet Alerts after eachother?

Created on 11 Nov 2015 · 12Comments · Source: t4t5/sweetalert

Hey,

Thanks for the sweet plugin, really love it!
However i have a small challenge when i have to chain multiple "Confirms" after eachother.

If you click "too fast" on the "Confirm" button, the page just get's stuck, and get non-responsive, and the next few Confirms don't show.

I bypassed this slightly, by adding a delay to the SWAL call, but if you click faster than the delay, it'll break again.

A pen showing the case:
http://codepen.io/anon/pen/dYQapo

However the page seems to stay responsive, but the next SWAL is not shown, only shortly as the old one is fading out.

And this pen showing the case with a delay, that if you click confirm before the finishes loading the SWAL, it just stops showing the next one.
http://codepen.io/anon/pen/QjJYdm

Similar/same as #433, #359 & #253 .

I hope to hear from you! :)

Source

inctor

Most helpful comment

I have the same problem as above. If anyone find this useful:

swal({
            //whatever parameters in first sweet alert
    },
        function(){
                        setTimeout(function(){
                             swal({ //whatever parameters in second sweet alert});
                       }, time);
     });

To avoid sweet alert to 'freeze' when chaining two or more alerts, just add a minor timeout. Maybe not the most fancy solution but it worked for me.

pararrayos on 22 Apr 2017

❤6 👍4

All 12 comments

Unfortunately, I ran into this bug as well which pretty much rendered sweetalert unusable for my project's needs.

It's a shame as I don't have the time to start digging around the code to push my own fix, but I love the functionality of the library. I will be watching this to see if it gets fixed and the moment it does, you can count this developer (and his users) as loyal sweet alerters.

charlex on 19 Nov 2015

Sadly it feels like this project has been abandoned.
Even the clone SweetAlert2, still have these bugs and no updates for a really long time.

It's really a shame, that it's been abandoned, since it's a really nice project!

But 121 open issues and 37 un-merged PR's. It's unlikely it'll be fixed or getting updates soon.

However, there is change with the possibility of #457 , which seems to be able to handle this primary issue.

inctor on 19 Nov 2015

@inctor, @Charlex I wrote up a guide on how to use the code addition I wrote to do this at #457. Because it adds on top of the existing sweetalert library, it doesn't require merging into the project/updating the library code. If you have thoughts to make it better let me know.

kentmw on 19 Nov 2015

@kentmw Hero. I'll give it a go and see if I run into any pain.

charlex on 19 Nov 2015

SweetAlert2 supports modals queue: https://sweetalert2.github.io/#chaining-modals

limonte on 7 Jun 2016

👍1

I have the same problem as above. If anyone find this useful:

swal({
            //whatever parameters in first sweet alert
    },
        function(){
                        setTimeout(function(){
                             swal({ //whatever parameters in second sweet alert});
                       }, time);
     });

To avoid sweet alert to 'freeze' when chaining two or more alerts, just add a minor timeout. Maybe not the most fancy solution but it worked for me.

pararrayos on 22 Apr 2017

❤6 👍4

@pararrayos bit hacky but can be useful as a temporary fix

fahmilatib on 18 May 2017

Sorry for such a long delay people. These issues should now be fixed in SweetAlert 2.0, which uses promises!

t4t5 on 8 Sep 2017

🎉3 👍1

Thank you so much for the update @t4t5 . Lovin' the new website layout BTW!

fahmilatib on 9 Sep 2017

If anyone stumbles uppon this and also getting undefined when calling swal (probably older versions). Here's how I worked around it:

if(notifications.length > 1) {
            var i = 0;
            function displayNext(){
                swal({title: notifications[i].title, text: notifications[i].body, type: 'info', closeOnConfirm:true}, function(){
                    if(i < notifications.length){
                        setTimeout(function(){
                            displayNext();
                        },500);
                    }
                });
                i++;
            }
            displayNext();
        }