Loading jQuery UI with getScript

jquery, jquery-ui

Solution

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

// ...

Problem

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 ?

Original source