JQuery UI Loaded Event?

Question

Is there anyway to not only detect that the jquery UI loaded but also fire an event when it does? Right now I have code wrapped in a $(document).ready() function but sometimes the UI code errors out because the UI library did not fully load (everything is loading in the correct order). The code works 99% of the time but about 1% of the users get a javascript error related to the UI not loading.

Something like

$(document).ready(function() {
  jQuery.ui.ready(function() { ....

Is anything like this possible?

Thanks.

Answer 1

You could try to load your plugin like jQuery-ui and other with getcript and hold the ready function(s) before the script is fully loaded

// Hold the ready function(s)
$.holdReady(true);

// Retrieve the script and unlock the ready function(s) when the script is loaded
$.getScript("myplugin.js", function() {
    $.holdReady(false);
});

Keeping you ready function(s) simple

$(document).ready(function() {

    // your code here

});

Answer 2

I ran into a similar problem in the past. Use this:

if (typeof jQuery.ui != 'undefined') {
  //do something
}

Hope this helps!