CODEWITHSUNDEEP
javascriptjquery-ui
waiwai933
waiwai933

Reputation: 14559

Testing if jQueryUI has loaded

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?

Upvotes: 137

Views: 77939

Answers (7)

Thomas Nilles
Thomas Nilles

Reputation: 1

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

Upvotes: 0

Raul Garcia
Raul Garcia

Reputation: 1

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

Upvotes: 0

Tushar Shukla
Tushar Shukla

Reputation: 6605

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


Upvotes: 1

Mike
Mike

Reputation: 24363

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

Upvotes: 9

chrismacp
chrismacp

Reputation: 3893

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

OR 

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

Should do the trick

Upvotes: 250

Christian C. Salvadó
Christian C. Salvadó

Reputation: 827198

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.

Upvotes: 16

bdl
bdl

Reputation: 1502

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>

Upvotes: 5

Related Questions