Sweetalert: Getting 'Uncaught RangeError: Maximum call stack size exceeded.' error

Created on 10 Oct 2014 · 10Comments · Source: t4t5/sweetalert

SweetAlert is working perfectly, but I am having an error. I use bootstrap modal and while I have it opened, I use as well SweetAlert. After I click 'Cancel', 'OK'.... on the SweetAlert, I get this 'Uncaught RangeError: Maximum call stack size exceeded' error. The problem is here:

      if (btnIndex === -1) {
        // Something in the dom, but not a visible button. Focus back on the button.
        $targetElement.focus();
      }

When I comment this code, I don't have the error anymore.
PS: I don't get this error when I don't have the modal opened.

Source

ramysa

Most helpful comment

I have the solution:
Comment out：
$targetElement.focus ();
_Probably in the 413 row._

reason211 on 1 Sep 2016

👍4

All 10 comments

I had this error, too.
It's because SweetAlert crashing with the bootstrap modal, I guess you're trying to prompt a sweet alert when you have an opened modal (of bootstrap). That's when this error you've mentioned is happening.
You need somehow (well, I don't know what your needs are) first close the bootstrap modal, and only then prompt the sweet alert. And it'll be OK.

slavikbialik on 12 Oct 2014

👍3

Thanks @littleneotrix. Exactly, I was trying to prompt the sweet alert while the bootstrap modal was opened and your solution totally works, but in my app I needed to leave it that way, this is why I had to comment the code.

ramysa on 12 Oct 2014

Well, so you can try & play with it a bit...
You can with Javascript right before you open the Sweetalert, just use .hide() on the bootstrap modal,
and only then open the Sweetalert, but do it like that more or less:

swal({   title: "Are you sure?",   text: "Your will not be able to recover this imaginary file!",   type: "warning",   showCancelButton: true,   confirmButtonColor: "#DD6B55",   confirmButtonText: "Yes, delete it!",   closeOnConfirm: false }, function(){   $('#myModal').modal('show')});

As you can see in the function in the end of the object, I tell him to prompt back the modal.
So... first hide the modal -> prompt the sweetalert -> on sweetalert's confirm, prompt back the modal.
That's the best solution I can provide ;)
Unless of course bootstrap fix this thing.

slavikbialik on 12 Oct 2014

👍1

I'm experiencing the same problem. Is this a bootstrap or sweetalert problem? The warning message in my case is generated by sweetalert, but could be caused by bootstrap.

manzato on 13 Dec 2014

I have got the same error
in my case, I have buttons in my modal, the buttons means to delete things, when clicked I use swal to confirm, at this point no error, but when I proceed and click 'cancel' or 'confirm' button, I get the error.

firstdev on 14 Dec 2014

I am getting this issue as well, deferring to using bootstrap's alert class for now.

kedarv on 21 Dec 2014

I ran into the same issue and came up with a decent way of handling it. I basically hide the modal, show swal, and on confirm bring back the modal. If one is using magnific popup for example, the code would look similar to this:

$('.mfp-wrap').hide();
swal({
    title: "Updated!",
    text: "#" + data.updateData['number'] + " was successfully updated",
    type: "success"
},
function(isConfirm) {
    $('.mfp-wrap').show();
});

This is basically what @littleneotrix was talking about. I just didn't catch his explanation at first and figured I would give a more detailed example. I find it to be an elegant enough solution for my use case.

For those asking, I don't think there is much that the developers can do to fix this problem. Double modals and callbacks are hefty.