CODEWITHSUNDEEP
javascriptjquery
markzzz
markzzz

Reputation: 47945

A script is executed/not executed due to when jQuery is loaded - Why?

This is a problem I have. Try this code:

if (typeof jQuery == 'undefined') {
    function getScript(url, success) {
        var script = document.createElement('script');
        script.src = url;

        var head = document.getElementsByTagName('head')[0];

        done = false;
        script.onload = script.onreadystatechange = function () {
            if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
                done = true;
                success();
                script.onload = script.onreadystatechange = null;
                head.removeChild(script);
            };
        };

        head.appendChild(script);
    };

    getScript('http://code.jquery.com/jquery-1.11.2.min.js', function () {
        if (typeof jQuery !== 'undefined') {
            jQuery(document).ready(function ($) {
                MyFunction($);
            });
        }
    });   
} else {
    jQuery(document).ready(function ($) {
        MyFunction($);
    });
}

function MyFunction($) {
    $.getJSON("http://archiesocial.progettiarchimede.it/widget_privacy/test.aspx?asd=1&callback=?", function (d) {
    }).done(function(d) { 
        JsonToHtml(d);
    });
}    

function JsonToHtml(html) {
    var items = [];
    $.each(html, function (key, val) {
        items.push(val);
    });

    $('body').prepend(items.join(''));
}

you will notice that my code check if jQuery is loaded. If not, it loads a version from external source; than retrieve a JSON, parse it and "execute it".

As you can see, the script loaded inside the body it is not loaded at all (this is my problem).

Now, try to choose a version/library of jQuery in the fiddle (1.8.3 is ok) and press play: you will see the script/button render as well: the script is executed!!!

Why loading jQuery first (here) render the script, and load jQuery later won't execute the script? Can you help me?

Upvotes: 3

Views: 132

Answers (2)

A. Wolff
A. Wolff

Reputation: 74420

I think your best bet is to force onload event to be refired if it is already fired because as you are loading jQuery (if undefined), this event is already fired. This is a workaround:

function JsonToHtml(html) {
    var items = [];
    $.each(html, function (key, val) {
        items.push(val);
    });

    $('body').prepend(items.join(''));
    if (document.readyState === 'complete') { // check if document is complete
        var evt = document.createEvent('Event');
        evt.initEvent('load', false, false);
        window.dispatchEvent(evt); // then redispatch onload event
    }
}

-DEMO-

Upvotes: 2

manuerumx
manuerumx

Reputation: 1250

I think the problem is the scope. The functions MyFunction() and JsonToHtml() are out of the scope. (Remember you are working with async functions like getJSON) Maybe my explanation are wrong, but the code works. :P

With this code you have no problem.

function _test(){}
_test.prototype = {
    hasjQuery: function(){
        if(typeof window.jQuery !='undefined' && !_test.prototype.otherLibrary() ) {
            return true;
        }else{
            return false;
        }
    },
    otherLibrary: function(){
        if (typeof document.$ == 'function') {
            return true;
        }else{
            return false;
        }
    },
    inyectjQuery: function(url, success){
        var script = document.createElement('script');
        script.src = url;
        script.id = "delete";
        done = false;
        script.onload = script.onreadystatechange = function() {
            if (!done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete')) {
                done = true;
                success();
                script.onload = script.onreadystatechange = null
            }
        };
        document.getElementsByTagName('head')[0].appendChild(script)
    },
    myFunction: function(){
        urljQuery = 'http://code.jquery.com/jquery-latest.min.js';
        if(_test.prototype.hasjQuery()){
            jQuery.getJSON("http://archiesocial.progettiarchimede.it/widget_privacy/test.aspx?asd=1&callback=?", 
                function (d) {
                    _test.prototype.JsonToHtml(d);
                }).done(function() { 
                    console.log("Success getJSON action");
                });
        }else{
            _test.prototype.inyectjQuery(urljQuery, function(){
                if (typeof window.jQuery == 'undefined') {
                    console.log("unable to load jQuery");
                }else{
                    jQuery.getJSON("http://archiesocial.progettiarchimede.it/widget_privacy/test.aspx?asd=1&callback=?", 
                    function (d) {
                        _test.prototype.JsonToHtml(d);
                    }).done(function() { 
                        console.log("Success getJSON action");
                    });
                }
            });
        }
    },
    JsonToHtml: function(html){
        var items = [];
        jQuery.each(html, function (key, val) {
            items.push(val);
        });

        jQuery('body').prepend(items.join(''));
    }
}
test = new _test();
test.myFunction();

Upvotes: -1

Related Questions