dimsemenov / Magnific-Popup

Light and responsive lightbox script with focus on performance.
http://dimsemenov.com/plugins/magnific-popup/
MIT License
11.39k stars 3.48k forks source link

Uncaught TypeError: Cannot read property 'open' of undefined #963

Open ninjazhai opened 7 years ago

ninjazhai commented 7 years ago

I'm using magnific popup here: http://www.126armyband.com/schedule-1.html

I loaded / included the library via JavaScript

On some websites it works, but it is not working on this site http://www.126armyband.com/schedule-1.html

The error says: Uncaught TypeError: Cannot read property 'open' of undefined

magnificpopup-undefined

I included jQuery library first, then magnific pop up.

I loaded magnific pop up using this code:

    /******** Called once jQuery has loaded ******/
function scriptLoadHandler(){

    loadScript(app_url + "embed/facebook-events/libs/js/magnific-popup/jquery.magnific-popup.min.js", function(){
        loadScript(app_url + "embed/facebook-events/libs/js/jquery.linkify.min.js", function(){

            // Restore $ and window.jQuery to their previous values and store the
            // new jQuery in our local jQuery variable
            $ = jQuery = window.jQuery.noConflict(true);

            if(jQuery==undefined){
                console.log('jQuery is UNDEFINED.');
            }else{
                console.log('jQuery is NOT UNDEFINED.');
            }

            if(jQuery.magnificPopup==undefined){
                console.log('jQuery.magnificPopup is UNDEFINED.');

            }else{
                console.log('jQuery.magnificPopup is NOT UNDEFINED.');
            }

            // Call our main function
            main();
        });
    });
}

loadScript looks like this:

    function loadScript(url, callback){

    /* Load script from url and calls callback once it's loaded */
    var scriptTag = document.createElement('script');
    scriptTag.setAttribute("type", "text/javascript");
    scriptTag.setAttribute("src", url);

    if (typeof callback !== "undefined") {
        if (scriptTag.readyState) {
            /* For old versions of IE */
            scriptTag.onreadystatechange = function(){
                if (this.readyState === 'complete' || this.readyState === 'loaded') {
                    callback();
                }
            };
        } else {
            scriptTag.onload = callback;
        }
    }
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(scriptTag);
}

Then I use it in the pop up:

    function showPopUp(jQuery, content_src, read_more_btn, dsm_fb_event){

    var show_pop_up_on_middle=dsm_fb_event.find('.show_pop_up_on_middle').text();

    var btn_pos=jQuery(read_more_btn).offset().top;
    var relative_pos=btn_pos - jQuery(window).scrollTop() - 240;

    console.log('is jQuery defined?');
    console.log(jQuery);

    console.log('is magnific pop up defined?');
    console.log(jQuery.magnificPopup);

    jQuery.magnificPopup.open({
        items: { src: content_src },
        'type' : 'inline',
        callbacks: {
            open: function() {
                jQuery(".dsm-fb-event-description").linkify();
                if(show_pop_up_on_middle==0){
                    jQuery('.mfp-container').css({ 'top' : relative_pos + 'px' });
                }
            },
            close: function() {
                if(show_pop_up_on_middle==0){
                    jQuery('.mfp-container').css({ 'top' : '0px' });
                }
            }
        }
    });

    applyPopUpUi(jQuery, dsm_fb_event);
}

Please help.