magnificpopup "Maxium call stack size exceeded"

Question

I've a stackoverflow!

I've tracked the source up to the setFocus and onFocusIn of the magnificpopup js file, but I cannot figure where I am generating it.

Some relevant lines (in this fragment an active magnificpopup is closed and some JS (generated via AJAX) creates another magnificpopup

var active_magnificPopup = $.magnificPopup.instance;
$( '#frm' ).ajaxSubmit( { url: '<?php echo get_template_directory_uri(); ?>/handleSubscriberForms.php', type: 'post', target: '#subscriptionSubmisionTarget' } );
active_magnificPopup.close();

Now the 'return' of the form handler

jQuery( document ).ready( function( $ ) {
  $( "#ajax-thankyou" ).magnificPopup( {
    type: "ajax",
    alignTop: false,
    closeOnContentClick: false,
    overflowY: "scroll", // as we know that popup content is tall we set scroll overflow by default to avoid jump
    tError: "<a href=\"%url%\">The content</a> could not be loaded." //  Error message, can contain %curr% and %total% tags if gallery is enabled
  } );
  setTimeout(
    function() {
      $( "#ajax-thankyou" ).trigger( "click" );
    },
    125
  );
} );

As I understand, the first popup is closed before the second is born, however, in mobile devices the code generates a stackoverflow and the first popup never closes (the second one is opened behind it).

It would be awesome if someone can clarify this a bit... my brain is painful at this point.

--- Edition after Jai's tip ---

Hey Jai,

Looks like, probably, the source is not where I thought. I've edited the 'return' and now doesn't use the trigger (next code-box).The thingy works as earlier (like a charm in computers, stakoverflow in mobiles).

echo '
    <script>
        jQuery( document ).ready( function( $ ) {
            setTimeout(
                function() {
                    $.magnificPopup.open( {
                        items: {
                            src: "' . get_template_directory_uri() . '/form-thankyou.php?pi=' . $post_ID . '"
                        },
                        type: "ajax",
                        alignTop: false,
                        closeOnContentClick: false,
                        closeBtnInside: true,
                        overflowY: "scroll",
                        tError: "<a href=\"%url%\">The content</a> could not be loaded."
                    } );
                },
                125
            );
        } );
    </script>
';

Here the console's log (where I understand that the infinite loop is generated between o._setFocus and o._onFocusIn, but I can't figure how to track what element is generating it)

Uncaught RangeError: Maximum call stack size exceeded jquery.tools.min.js:37
---From here to the end is repeating---
f.event.trigger jquery.tools.min.js:37
(anonymous function) jquery.tools.min.js:37
e.extend.each jquery.tools.min.js:36
e.fn.e.each jquery.tools.min.js:36
f.fn.extend.trigger jquery.tools.min.js:37
f.fn.(anonymous function) jquery.tools.min.js:37
e.fn.extend.focus jquery.ui.core.min.js?ver=1.10.4:4
o._setFocus magnific-popup.min.js:3
o._onFocusIn magnific-popup.min.js:3
f.event.dispatch jquery.tools.min.js:37
h.handle.i jquery.tools.min.js:37

Thanks in advance

Answer 1

I have also got same issue when i used the .trigger() method. solution to that what i did was, i made a function and called it again if required, so you can do this:

function magPopup(){
  $( "#ajax-thankyou" ).magnificPopup( {
    type: "ajax",
    alignTop: false,
    closeOnContentClick: false,
    overflowY: "scroll", // as we know that popup content is tall we set scroll overflow by default to avoid jump
    tError: "<a href=\"%url%\">The content</a> could not be loaded." //  Error message, can contain %curr% and %total% tags if gallery is enabled
  });
}

jQuery(document).ready(function($) {

  magPopup();

  setTimeout(function() {
      magPopup();
    }, 125);
});