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

Question

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?

Double-check your brackets. As posted it looks like main() and the jQuery(document).ready... are not properly closed in your markup. — Moob
– Moob, Commented Sep 3, 2014 at 10:36

V2Solutions - MS Team · Accepted Answer · 2014-09-03 10:34:35Z

4

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

answered Sep 3, 2014 at 10:34

V2Solutions - MS Team

1,1276 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Swetha · Accepted Answer · 2014-09-03 10:27:55Z

0

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.

edited Sep 3, 2014 at 10:27

answered Sep 3, 2014 at 10:14

Swetha

74610 silver badges19 bronze badges

1 Comment

Aravind G S Over a year ago

This is a stand alone JS file. It can be added to any project and included. To do what you just mentioned jQuery should be previously included. Here we are dynamically loading the jQuery file. And I did try what you said, it didn't work

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related