CODEWITHSUNDEEP
javascriptjquerywidget
Matthew Kooshad
Matthew Kooshad

Reputation: 319

embed a jquery script after jquery is loaded by widget

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.

Upvotes: 2

Views: 599

Answers (2)

Matthew Kooshad
Matthew Kooshad

Reputation: 319

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.

Upvotes: 0

Mottie
Mottie

Reputation: 86483

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({});
    });
});

Upvotes: 2

Related Questions