Testing if jQueryUI has loaded

Question

I'm trying to debug a website, and I think that jQueryUI may not have loaded properly. How can I test if jQueryUI has loaded?

Answer 1

if (jQuery.ui) {
  // UI loaded
}

OR

if (typeof jQuery.ui != 'undefined') {
  // UI loaded
}

Should do the trick

Answer 2

You need to check if both, the jQuery UI Library file and CSS Theme are being loaded.

jQuery UI creates properties on the jQuery object, you could check:

jQuery.ui
jQuery.ui.version

To check if the necessary CSS file(s) are loaded, I would recommend you to use Firebug, and look for the theme files on the CSS tab.

I've seen problems before, when users load correctly the jQuery UI library but the CSS theme is missing.

Answer 3

I know this is an old question, but here is a quick little script you can use to wrap all your jQuery UI things that don't have an associated event to make sure they get executed only after jQuery UI is loaded:

function checkJqueryUI() {
    if (typeof jQuery.ui != 'undefined') {
        do_jqueryui();
    }
    else {
        window.setTimeout( checkJqueryUI, 50 );
    }
}
// Put all your jQuery UI stuff in this function
function do_jqueryui() {
    // Example:
    $( "#yourId" ).dialog();
}
checkJqueryUI();

Answer 4

Just test for the ui object, e.g.

<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
<script>
  $(function(){
    // did the UI load?
    console.log(jQuery.ui);
  });
</script>

Answer 5

You can check if jQuery UI is loaded or not by many ways such as:

if (typeof jQuery.ui == 'undefined') {
   // jQuery UI IS NOT loaded, do stuff here.
}

OR

if (typeof jQuery.ui != 'function') {
    // jQuery UI IS NOT loaded, do stuff here.
}

OR

if (jQuery.ui) {
    // This will throw an error in STRICT MODE if jQuery UI is not loaded, so don't use if using strict mode
    alert("jquery UI is loaded");
} else {
    alert("Not loaded");
}

Answer 6

Well, you are using jQuery to check for the presence of jQuery. If jQuery isn't loaded then $() won't even run at all and your callback won't execute, unless you're using another library and that library happens to share the same $() syntax.

window.onload = function(){
    if(window.jQuery){
        if(window.jQuery.ui){

        }else{
            console.log("jquery ui isn't loaded");
        }
    }else{
        console.log("jquery isn't loaded");
    }
}

Answer 7

I created 2 helper functions to load stuff dynamically, returning a promise.

window.jsinclude = (javascriptfile) => {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = javascriptfile;
    script.type = "text/javascript";
    script.onload = resolve;
    script.onerror = reject;
    script.defer = true;
    document.head.append(script);
  });
}

window.cssinclude = (cssfile) => {
  return new Promise((resolve, reject) => {
    const cssf = document.createElement("link");
    cssf.rel = "stylesheet";
    cssf.type = "text/css";
    cssf.href = cssfile;
    cssf.onload = resolve;
    cssf.onerror = reject;
    document.head.append(cssf);
  });
}