Question

I am trying to build a widget which requires the person to load jQuery and jQuery.UI.

Getting the jQuery to load is not a problem but adding ui the the header is just not working and I keep getting this error.

b is undefined
[Break on this error] (function(b,c){function f(g){return!b(...NUMPAD_ENTER:108,NUMPAD_MULTIPLY:106,

Here is the script in its simple form.

(function() {

// Localize jQuery variable
var jQuery;

/******** Load jQuery if not present *********/
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.4.4') {
    var script_tag = document.createElement('script');
    script_tag.setAttribute("type", "text/javascript");
    script_tag.setAttribute("src", "http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js");
    script_tag.onload = scriptLoadHandler;  
    script_tag.onreadystatechange = function () { // Same thing but for IE
        if (this.readyState == 'complete' || this.readyState == 'loaded') {
            scriptLoadHandler();
        }
    };
    // Try to find the head, otherwise default to the documentElement
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);

} else {
    // The jQuery version on the window is the one we want to use
    jQuery = window.jQuery;
    main();
}



/******** Called once jQuery has loaded ******/
function scriptLoadHandler() {
    // Restore $ and window.jQuery to their previous values and store the
    // new jQuery in our local jQuery variable
    jQuery = window.jQuery.noConflict(true);  
    // Call our main function
    main();
}

/******** Our main function ********/

function main() {

// Add some validation here to make sure UI is not loaded etc...
jQuery.getScript('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js');

jQuery(document).ready(function($)
{    
    var date = new Date();
    var m = date.getMonth(), d = date.getDate(), y = date.getFullYear();
    $('.datepicker').datepicker({minDate: new Date(y, m, d)});

    /******* Load HTML *******/
    var jsonp_url = "/search/form/%AFFILIATE_ID%/%FORM_TYPE%/";
    $.getJSON(jsonp_url, function(data)
    {
      $('#my-widget').html(data);
    });

});
}

})(); // We call our anonymous function immediately

Any ideas how I can resolve this ?

Answer 1

I’ve run into this one before — jQuery isn’t “defined” when jQuery UI begins to load. Yes, this can be true even if jQuery is loading it! 😉

The jQuery UI script takes the global name jQuery as its first argument. You aren’t loading jQuery UI until after you’ve called jQuery.noConflict(true), which removes jQuery from the global object (window).

There are two ways to solve this. If you’re okay leaving window.jQuery intact, simply remove the true from your noConflict call; this relinquishes control over $ but leaves jQuery around for jQuery UI to use:

/******** Called once jQuery has loaded ******/
function scriptLoadHandler() {
    // Restore $ to its previous values and store the
    // new jQuery in our local jQuery variable
    jQuery = window.jQuery.noConflict(); // no argument!
    // Call our main function
    main();
}

Alternatively, move your noConflict call into a callback on getScript:

/******** Called once jQuery has loaded ******/
function scriptLoadHandler() {
    // Store jQuery in a local variable so it can be removed later
    jQuery = window.jQuery;
    // Call our main function
    main();
}

/******** Our main function ********/

function main() {

// Add some validation here to make sure UI is not loaded etc...
jQuery.getScript('http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js', function() {
    jQuery.noConflict(true);
});

// ...