Magnific-popup: Opening popup from ajax loaded popup close both

[wojto]

Hi,
i hava problems with opening popup from ajax content.

First, i open popup with:

<a href="/signin" onclick="$.magnificPopup.open({
closeBtnInside:true,
closeOnContentClick:false,
fixedBgPos:true,
fixedContentPos:false,
items:{src:this.href},
midClick:true,
overflowY:'auto',
removalDelay:'0',
type:'ajax'}); return false;">Signin</a>

Second, on dynamically loaded content (url: /signin) i have another popup:

<a href="/register" onclick="$.magnificPopup.open({
closeBtnInside:true,
closeOnContentClick:false,
fixedBgPos:true,
fixedContentPos:false,
items:{src:this.href},
midClick:true,
overflowY:'auto',
removalDelay:'0',
type:'ajax'}); return false;">Register</a>

Problem is that when i click "Register" it opens and closes immediately, but i want the new content (/register) to show in current popup.

I tried to add before second popup:

if ($.magnificPopup.instance) {$.magnificPopup.close();}

but that didn't help, i get: TypeError: mfp.currItem is null

Logging to console gives:

Parsing content. Item object that is being parsed: Object { data={...}, src="/rejestracja", type="ajax", ...}
Status changed Object { status="loading", text="Loading..."}
/register Aborted
Content changed
(empty string)
Popup close has been initiated
Status changed Object { status="error", text="<a href="/register> could not be loaded."}
Popup removal initiated (after removalDelay timer finished)
Popup is completely closed

Setting "removalDelay:'1000'" will show /register content but it closes after 1 second.

Do u know any solution to open another popup from ajax loaded popup?

[valmont]

This is a feature I am also interested in. I open a Ajax instance and within have actions that need to change out the content with another Ajax call. I am currently getting around this limitation by closing the modal and using the afterClosed callback to open the next. I am hoping there is or will be a cleaner way.

[ziyinaaronwang]

I was led to here by Google as I was searching for a solution to the same feature mentioned above: how to open an ajax popup from within an already loaded ajax popup, or change the content of the already loaded ajax popup with another ajax call. (the action triggering the second ajax is contained within the first ajax popup). Hoping the author or some other PROs may come up with a working solution and share it soon!

[azzierogers]

darn.... I saw this issue, saw it had comments, and started getting excited.... I've seen questions about this on SO also, but they had 0 answers. I've been looking around for some time now, trying to find a solution. I hope something will come up soon...

[madcyph3r]

Hello, here is a workaround for your problem.

  $("#myButton").click(function() {

    // close current Popup
    $.magnificPopup.close();
    // 100, time must be bigger, as the delay from the first popup. By me the delay is 65
    window.setTimeout(openNewAjaxPopup,100);
  });

  // open the new ajax popup
  function openNewAjaxPopup() {
    $.magnificPopup.open({
      closeOnBgClick: false,
      closeBtnInside: true,
      enableEscapeKey: true,
      removalDelay: 65,
      mainClass: 'mfp-fade',
      items: {
      },
      callbacks: {
        elementParse: function(item) {
          postData = {
            data: data,
          }
          var mp = $.magnificPopup.instance;
          mp.st.ajax.settings.data = postData;
        }
      },
      type: 'ajax',
      ajax: {
        settings: {
          url: './ajax/page,html',
          type: 'POST'
        }
      }
    });
  }