Determine if an element is a jQueryUI Widget

Question

I have written a jquery-ui widget using the Widget Factory...

I need to be able to determine in code whether the element is already a widget or not...

My investmentGrid widget is created on #container with

 $('#container').investmentGrid()

I need to be able to determine elsewhere in the code if $('#container') is already an investmentGrid

Piapiacenza

Answer 1

You can query the element's jQuery.data() function, like so:

if ($('#container').data('investmentGrid')) {
   ...
}

Tindall

Answer 2

You could try the pseudo selector that is created for you when using the widget factory. $(":namespace-widgetname")

Aqaba

Answer 3

@dan-story may have had the answer at the time he answered it, but I have found that that method doesn't work anymore. Well, not entirely. At least not with jQueryUI 1.10. According to the documentation at http://api.jqueryui.com/jQuery.widget/ in the "Instance" section, you now need to have the widget's full name.

For example, if you create your widget factory with this:

$.widget("Boycs.investmentGrid", ...);

Then, to check if container has it, you would check with this:

if ($('#container').data('Boycs-investmentGrid'))
{
    ...
}

It is no longer enough to just use the name.

Scrapple

Answer 4

@Boycs: As per my understanding, using Widget Factory protects you from instantiating a plugin multiple times on the same element. (ref: http://jqueryui.pbworks.com/widget-factory)

In addition if you want to confirm if "container" is already an investment grid you can try the following option from inside your plugin code:

this.element.data("investmentGrid") === this;

For more details you can refer to docs.jquery.com/UI_Developer_Guide

Fcc

Thanks... I may not have been clear in my initial question... I need to be able to determine from outside of my plugin code whether or not $('#container') is already an investmentGrid or not... – Piapiacenza

Can you share with me why you would need to establish whether "container" is already an investmentGrid or not? It will help me answer more accurately. Thanks – Fcc

Answer 5

Current versions of jQuery UI (I can confirm it with 1.11.x) allow you to query for an instance of a widget via the instance() method. This will then look like this:

$('#container').investmentGrid('instance')

If the element does not have an investmentGrid widget assigned, you will get undefined back.

You may also use call this instead:

$(#container').is(':data("namespace-investmentGrid")')

This has the advantage, that it also works even when the widget is not loaded.

Olnek

Answer 6

JQuery UI Widgets are declared like this:

$.widget("rootclassname.investmentGrid", {
                    options: {
                    

            

This is what I did:

if (typeof ($.rootclassname.investmentGrid) != 'undefined') {

    // At this point, we know the investmentGrid.js file has loaded. Now we need to check if the widget has been instantiated.
    var widget = document.getElementsByClassName('investmentGrid');

    if (!(widget.length && (widget.length > 0))) {

        // It has not been instantiated, so do that here. In this case we expect that a DOM element already exists.
        var div = document.getElementById('divRootclassnameinvestmentGrid');
        if (!div) {
            div = document.createElement('div');
            div.id = 'divRootclassnameinvestmentGrid';
            div.style.display = 'none';
            document.body.appendChild(div); // place at end of document.
        }
        $(div).investmentGrid({});
    }

    $('.investmentGrid').investmentGrid('somemethodnamecasesensitive');

} else {

    alert('Error: The investmentGrid.js widget has not been loaded. Inspect the index.html file to make sure it is specified to load.');

}

Daddy