CODEWITHSUNDEEP
javascriptjqueryjquery-ui
Aravind G S
Aravind G S

Reputation: 392

Unable to load jQuery UI dynamically - Uncaught TypeError: Cannot read property 'ui' of undefined

I load my jQuery and jQuery UI files dynamically. The jQuery file loads successfully but when the jQuery UI file loads an error occurs

The following is what is shown in the console : Uncaught TypeError: Cannot read property 'ui' of undefined

My code is given below

(function()
{
var jQuery;
if (window.jQuery === undefined)
{
    var script_tag = document.createElement('script');
    script_tag.setAttribute("type", "text/javascript");
    script_tag.setAttribute("src",
            "//code.jquery.com/jquery-1.11.0.min.js");




    if (script_tag.readyState)
    {
        script_tag.onreadystatechange = function()
        {
            if (this.readyState === 'complete' || this.readyState === 'loaded')
            {
                scriptLoadHandler();
            }
        };
    }

    else
    {
        script_tag.onload = scriptLoadHandler;
    }
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(script_tag);

}

else
{
    jQuery = window.jQuery;

    main();
}

function scriptLoadHandler()
{
    jQuery = window.jQuery.noConflict(true);

    main();
}

function main() {

    jQuery(document).ready(function($) {
        jQuery.getScript('http://code.jquery.com/ui/1.11.1/jquery-ui.min.js', function() {
            jQuery.noConflict(true);
        });
};
})();

Can someone help me with this?

Upvotes: 0

Views: 1282

Answers (2)

V2Solutions - MS Team
V2Solutions - MS Team

Reputation: 1127

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

Upvotes: 4

Swetha
Swetha

Reputation: 746

Use :

$(document).ready(function() {});

or

$(function() {});

The two statements are actually the exact same. So the second call is just a shortcut for the first.

The $ notation is again only a shortcut for jQuery. If you have loaded jQuery into your website you can use both. 

 (function($){
 }(jQuery));

Here You're calling that anonymous function (which has $ as parameter) and pass the jQuery object in.

Upvotes: 0

Related Questions