Search code examples
ajaxinternet-explorer-9magnific-popup

Magnific Popup + ajax call for html fragment


Trying to implement a magnific pop-up for ajax content. Only want to load an element from the page that the link is pointing to. To make it easier I'm using "data-fragment" as an attribute on the links. Markup looks like this:

<a href="browse-taxonomy.html" class="modal-ajax-fragment" data-fragment="#browse-taxonomy" title="Browse">

JS function looks like this:

$( '.modal-ajax-fragment' ).magnificPopup({
          type: 'ajax',
          fixedContentPos: false,
          fixedBgPos: true,
          overflowY: 'auto',
          closeBtnInside: true,
          preloader: false,
          midClick: true,
          removalDelay: 300,
          mainClass: 'my-mfp-zoom-in',
          disableOn: 480,

          callbacks: {

             parseAjax: function( mfpResponse ) {

                    var mp = $.magnificPopup.instance,
                        t = $( mp.currItem.el[0] ),
                        fragment = ( t.data( 'fragment' ) );

                        mfpResponse.data = $( mfpResponse.data ).find( fragment );
                        console.log( 'Ajax content loaded:', mfpResponse );
            }
          }
      });

Works GREAT in all modern browsers (Chrome, FF, Safari, IE10) -- but I must be doing something wrong b/c it absolutely chokes in IE9 and below. IE's console/inspector tells me nothing -- sometimes it will work after spinning for minutes -- sometimes it just locks the program up.

Any ideas what could be causing such headaches for IE? Thanks!


Solution

  • Solution: remove the line that logs the mfpResponse to the console:

    // console.log( 'Ajax content loaded:', mfpResponse );