Fancybox Recursion causes a stack overflow

Question

It seems that when I add an afterClose callback to my fancybox I'm getting this error:

Uncaught RangeError: Maximum call stack size exceeded

This is the code I am using:

$("a.termsLink").fancybox({
    type            : 'iframe', 
    fitToView       : false,
    width           : 450,
    height          : 600,
    afterClose  : function(){
        $('#regForm').click();
    }
});

What is supposed to happen is when the termsLink box closes, the regForm is supposed to open. I've expiremented with differnt callbacks, but the issue that I am running into seems to be unaffected by this.

The solution appears to be as follows:

    afterClose      : function(){
        setTimeout(function(){$('#regForm').click();}, 1);
    }

However that feels like a very hacky method to me, the issue seems to be that the fancybox code trys to call the new box while the animation for the other box is still running, which causes this issue. Is this a documented issue with FancyBox? Or is this a function of the way jQuery animation event work? Is there a more elegant solution to this issue?

That is most definitely not the case, I've verified that. And this is the only place that this error shows up — Xenology, Mar 28 '12 at 22:10
what is `#regForm`? a `div` tag or a `form` tag? ... what is the idea to click on it? ... what you are trying to do is redirect visitors to that element after close? ... like ` — JFK, Mar 29 '12 at 02:42
#regForm, is another fancybox that I am trying to call on the exit of the termsLink Fancybox. Technically speaking it is a anchor tag, but its attached to a fancy box. — Xenology, Mar 29 '12 at 17:14
Somewhat related: http://stackoverflow.com/questions/5844262/fancybox-infinite-loop-cannot-read-property-href-of-undefined — Lilith River, Mar 14 '13 at 16:40

score 1 · Answer 1 · answered Mar 14 '13 at 16:51

1

If you're using Twitter Bootstrap < 2.3.1, it's known to cause this exact issue (I just experienced it, and upgrading bootstrap solved the problem)

More details here: https://github.com/fancyapps/fancyBox/issues/519

answered Mar 14 '13 at 16:51

Lilith River

16,204
2
44
76

score 0 · Answer 2 · edited May 23 '17 at 12:11

0

Are you sure the problem is related to the click function? I found the same problem including, by mistake, two jQuery versions (jquery-1.2.6.pack.js and jquery-1.4.4.min.js) Removing the last one solved the problem. I checked this because of this topic loading jquery twice causes an error?. You could try to check it.

edited May 23 '17 at 12:11

Community

1
1

answered May 07 '12 at 12:08

sonia

1

score 0 · Answer 3 · answered Mar 28 '12 at 22:04

0

Try

$("a.termsLink").fancybox({
    type            : 'iframe', 
    fitToView       : false,
    width           : 450,
    height          : 600,
    afterClose  : function(){
        $('#regForm').focus();
    }
});

although what you have should work you're right. Unsure but check the script doesn't close all fancybox's open. if the #regForm is being opened into a fancybox hence why you'd need the timeout.

answered Mar 28 '12 at 22:04

The Angry Saxon

792
2
7
24

I should mention that both regForm and termsLink are fancyboxes, so calling the click function is trying to open a different fancybox, but my assumption was that the afterClose method would provide enough separation from the events. – Xenology Mar 28 '12 at 22:07
What version of fancy box are you using are you using? – The Angry Saxon Mar 28 '12 at 22:15

score 0 · Answer 4 · answered Mar 28 '12 at 22:23

Looking into the fancybox script they use this function

    function _cleanup() {
        overlay.fadeOut('fast');

        title.empty().hide();
        wrap.hide();

        $.event.trigger('fancybox-cleanup');

        content.empty();

        currentOpts.onClosed(currentArray, currentIndex, currentOpts);

        currentArray = selectedOpts = [];
        currentIndex = selectedIndex = 0;
        currentOpts = selectedOpts  = {};

        busy = false;
    }

This basically confirms what I was saying before. All the instances of fancybox are cleared after this function is run. So even though you've got one opening straight after it's being cleared before really being shown. The solution you've come up with seems to be the better solution unless you want to fiddle with the fancybox script yourself :)

So this seems like something i should report as a bug in fancybox then? My understanding is that the use of setTimeouts and setIntervals, is bad practice. I'm worried because the call stack size in Chrome is absurdly huge. So adding events to the stack continuously and causing a recursion error seems like it may be a serious issue. — Xenology, Mar 28 '12 at 22:26

Fancybox Recursion causes a stack overflow

4 Answers4