CODEWITHSUNDEEP
javascriptjquerycssjquery-ui
srgg6701
srgg6701

Reputation: 2038

what is the best way to check if the page has jQuery, jQuery.ui & jQuery.ui.css

I have some widget which should be embedded into the page and should be draggable & resizable. So the current approach is to check if the page has already the jQuery, jQuery.ui and jQuery.ui styles included. If it has all of them, just use them, otherwise -- insert them from our service site like and tags appropriately. I have some doubts about how it implemented, particulary here ─ First it checks jQuery. If found, it tries to find jQuery.ui styles. It seeks the 2 common classes by their names' substrings: 

for(var i = 0, j = stylesheets.length; i<j; i++){
    var classes = stylesheets[i].rules;
    if(classes){ console.log({classes:classes});
        for (var x = 0, y = classes.length; x < y; x++) {
            if( classes[x].selectorText.indexOf('.ui-draggable')!=-1
                || classes[x].selectorText.indexOf('.ui-resizable')!=-1) {
                if(classes[x].cssText){
                    console.log('found: '+classes[x].cssText);
                    classCount++;
                    if(classCount==2){
                        break checkStyles;
                    }
                }
            }
        }
    }else console.log('no classes');
}

Here is the point. How may I be sure that if it found 2 classes that means that there are ALL necessary classes in order to garantee the proper widget behavior? Or should I add those styles anyway no matter of their presence on the page? But if I do, then it will double a styles content. It looks like a dilemma. So if there a standard mature approach?

UPD. The point is NOT detecting jQuery, but how to manage jQuery.ui styles best.

Upvotes: 1

Views: 65

Answers (1)

Matt Thomas
Matt Thomas

Reputation: 5734

jQuery adds a global "jQuery" object (and so does jQuery.ui), so you can do something like this:

if (typeof jQuery != "undefined") {
    if (typeof jQuery.ui != "undefined") {
        // You've got jQuery with UI
    } else {
        // You've only got jQuery, no UI
    }
} else {
    // No jQuery
}

Upvotes: 3

Related Questions