embed a jquery script after jquery is loaded by widget

Question

https://stackoverflow.com/a/6065421 was helpful to see how to confirm jquery has been loaded. my widget will need a class that was written using jquery. may i have some assistance on embedding this other class built using jquery? thank you,

below is the snippet from the above link with my code added in the final portion as noted in the code comments:

    (function(window, document, version, callback) {
    var j, d;
    var loaded = false;
    if (!(j = window.jQuery) || version > j.fn.jquery || callback(j, loaded)) {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "/media/jquery.js";
        script.onload = script.onreadystatechange = function() {
            if (!loaded && (!(d = this.readyState) || d == "loaded" || d == "complete")) {
                callback((j = window.jQuery).noConflict(1), loaded = true);
                j(script).remove();
            }
        };
        document.documentElement.childNodes[0].appendChild(script)
    }
})(window, document, "1.3", function($, jquery_loaded) { //my code added below
    var script_tag = document.createElement('script');
script_tag.setAttribute("type","text/javascript");
script_tag.setAttribute("src", "http://mysite.com/widget/slides.jquery.js");
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);

$('#slides').slides({}); //this line gives an error.
});

right now, i am trying the following based on the response(s) provided to this question (line that throws error is noted with a comment):

//this function is called after jquery being embedded has been confirmed. {mysite} placeholder is nonexistent in actual code.
function main() {
jQuery(document).ready(function($) {
    var css_link = $("<link>", {
        rel: "stylesheet",
        type: "text/css",
        href: "http://mysite/widget/widget.css"
    });
    css_link.appendTo('head');

    $('#crf_widget').after('<div id="crf_widget_container"></div>');

    /******* Load HTML *******/
    var jsonp_url = "http://mysite/widget.php?callback=?";
    $.getJSON(jsonp_url, function(data) {
        $('#crf_widget_container').html(data);

        $('#category_sel').change(function(){
            alert(this.value);
        });

        $.getScript("http://mysite/widget/slides.jquery.js", function(data, textStatus, jqxhr) {
            alert(1); //fires ok
            $('#slides').slides({}); //errors
        });
    });
});
}

error 1: $ is undefined .../slides.jquery.js?_=1341349267810 Line 22
error 2: $("#slides").slides is not a function .../widget.js?1341349266628 Line 61

$('#slides').slides({}); works when i tested the workings of the widget. however, when making it into a widget, the above errors are what i've faced.

anyone with more suggestions?

after waiting a couple weeks, i just took the code from the jquery class that i needed and put it inside the body after the jquery's load was confirmed. i would have preferred to import the jquery class after jquery was loaded, but i couldn't figure it out.

score 2 · Answer 1 · answered Jul 03 '12 at 02:24

2

Since you've already loaded jQuery, maybe it would be easier to use the $.getScript() function to get your slides.jquery.js file - something like this:

<!-- language: lang-js -->
(function(window, document, version, callback) {
    var j, d, loaded = false;
    if (!(j = window.jQuery) || version > j.fn.jquery || callback(j, loaded)) {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "/media/jquery.js";
        script.onload = script.onreadystatechange = function() {
            if (!loaded && (!(d = this.readyState) || d == "loaded" || d == "complete")) {
                callback((j = window.jQuery).noConflict(1), loaded = true);
                j(script).remove();
            }
        };
        document.documentElement.childNodes[0].appendChild(script)
    }
})(window, document, "1.3", function($, jquery_loaded) { //my code added below
    // use $.getScript
    $.getScript("http://mysite.com/widget/slides.jquery.js", function(data, textStatus, jqxhr) {
        $('#slides').slides({});
    });
});

answered Jul 03 '12 at 02:24

Mottie

84,355
30
126
241

i've updated my initial question to show the current function i am using. it is using the approach you've suggested, but the line in the body is throwing error still. i have tested this line that throws the error with normal non-widget approach, and there's not a problem. so, it seems jquery is not available when needed. the code preceding the $.getScript block does not give a problem, which is jquery-supported syntax. – Matthew Kooshad Jul 03 '12 at 21:15
What error? Are you sure `$('#slides')` exists? Why is `$.getScript()` inside of a `$.getJSON()`, it should be outside of that function unless `$('#slides')` is inside of the HTML that is loaded. Have you heard about [yepnope.js](http://yepnopejs.com/)? – Mottie Jul 03 '12 at 21:30
i've edited my question to show the errors. $.getScript() is nested in the getJSON() for the very reason you noted. i looked into yepnope.js, but i wonder is it possible to correct my current code setup since i didn't see a 'making-a-widget' example there? – Matthew Kooshad Jul 05 '12 at 16:49

score 0 · Accepted Answer · answered Jul 12 '12 at 20:35

after waiting a couple weeks, i just took the code from the jquery class that i needed and put it inside the body after the jquery's load was confirmed. i would have preferred to import the jquery class after jquery was loaded, but i couldn't figure it out.

embed a jquery script after jquery is loaded by widget

2 Answers2