Open() method doesn't work for the dynamic popups

[drgullin]

// Open popup immediately. If popup is already opened - it'll just overwite the content (but old options will be kept). // - first parameter: options object // - second parameter (optional): index of item to open $.magnificPopup.open({ items: { src: 'someimage.jpg' }, type: 'image'

// You may add options here, they're exactly the same as for $.fn.magnificPopup call // Note that some settings that rely on click event (like disableOn or midClick) will not work here }, 0);

This doesn't work for a dynamically created popups.

Here's an example http://jsbin.com/esebEGa/1

Child static works well:

$('.toggle').each(function() {
  var item = $(this);
  var decor = item.data('mfp-decor');

  item.magnificPopup({
    type: 'inline',
    midClick: true,
    removalDelay: 400,
    mainClass: function() {
      var classname = 'mfp-fade';

      if (decor && decor.length) {
        classname = classname + ' ' + decor;
      }

      return classname;
    }
  });
});

Child dymanic doesn't work:

$('.dynamic').on('click', function(event) {
    event.preventDefault();

      $.magnificPopup.open({
            items: {
              src: '<div class="popup popup-status">Dynamic</div>'
            },
            type: 'inline',
            showCloseBtn: false,
            removalDelay: 400,
            mainClass: 'mfp-status'
          });
});

If child dymanic link is clicked, both popups are closed.

I've also tried this solution https://github.com/dimsemenov/Magnific-Popup/issues/53#issuecomment-17804411 - same result, both popups are closed once you try to open a dynamically created popup.

[drgullin]

This happens because of the wrong clicked target checking. Once some element is clicked to replace a current popup, both popups are closed, because plugin checks for a clicked target existance inside the new content, not the previous one. This means, if there's no clicked target clone inside the replacing content, popup will be closed.

Here's a hotfix:

• https://github.com/dimsemenov/Magnific-Popup/blob/c48ede21c00cedf94b39c3c325c3caca098ced8f/src/js/core.js#L518 append:

mfp.prevContent = mfp.content;

• https://github.com/dimsemenov/Magnific-Popup/blob/c48ede21c00cedf94b39c3c325c3caca098ced8f/src/js/core.js#L113 prepend:

if (mfp.prevContent) {
  if (!$.contains(mfp.prevContent[0], target)) {
    return true;
  } else {
    return false;
  }
} else {

same line, append:

}

• https://github.com/dimsemenov/Magnific-Popup/blob/c48ede21c00cedf94b39c3c325c3caca098ced8f/src/js/core.js#L427 wrap:

if (!mfp.isOpen) {}

• https://github.com/dimsemenov/Magnific-Popup/blob/c48ede21c00cedf94b39c3c325c3caca098ced8f/src/js/core.js#L437 append:

mfp.prevContent = null;

Since this solution may have some side effects, I don't make a pull request.

It works for me both for inline and image (gallery) types.

[dimsemenov]

Thank you, I'll look into it.

By the way, to fix this you may just add event.stopImmediatePropagation(); on that .dynamic click event handler, so the event won't come to popup at all.

[drgullin]

You're welcome.

Same issue for the ajax loaded popups, current hotfix doesn't help.

[owlmsj]

Looking for a hack too.

[xfechx]

Has this been resolved?

I am trying to open a magnific popup from a link within an ajax generated magnific popup, without success...

[jpcharrier]

@xfechx did you ever resolve your issue? I'm having the same issue as mentioned here: #852

[xfechx]

Hi @jpcharrier, no I still unable to resolve it. Can't swap ajax content in one magnific popup.

It works with normal non-ajax content though...

Let me know if you find a workaround!

On Tue, 19 Apr 2016, 07:54 jpcharrier notifications@github.com wrote:

@xfechx https://github.com/xfechx did you ever resolve your issue? I'm having the same issue as mentioned here: #852 https://github.com/dimsemenov/Magnific-Popup/issues/852

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/dimsemenov/Magnific-Popup/issues/227#issuecomment-211597807

[jpcharrier]

@xfechx you will be the first to find out (other than the boss of course!). There must be a way... I might try and abstract the ajax away from Magnific and use raw JS there to achieve it.

Still think it would be great if there was a simple update method for ajax'd content!

[xfechx]

I agree! It would totally change many things around the web and actively updating popups with ajax loaded content!

On Tue, 19 Apr 2016, 15:16 jpcharrier notifications@github.com wrote:

@xfechx https://github.com/xfechx you will be the first to find out (other than the boss of course!). There must be a way... I might try and abstract the ajax away from Magnific and use raw JS there to achieve it.

Still think it would be great if there was a simple update method for ajax'd content!

— You are receiving this because you were mentioned. Reply to this email directly or view it on GitHub https://github.com/dimsemenov/Magnific-Popup/issues/227#issuecomment-211731678

[nvontrotha]

Has there been any update on this?