Need to know if a jQuery UI Widget has been applied to a DOM object

Question

I\'m using jQuery and have some interactions with a jQuery UI where I need to get options. However there\'s a possibility that the jQuery UI function has not been applied yet t

Answer 1

According to this discussion, the recommended way to detect if a widget has been rendered on an element is as follows:

var hasWidget = $('selector').is(':ui-widgetname');

Answer 2

As of jQuery UI 1.11, widgets can be directly tested for via the instance method:

var hasProgressbar = ($(element).progressbar("instance") !== undefined);

Documentation: http://api.jqueryui.com/jQuery.widget/#method-instance

Answer 3

You can access the progress bar object on the element by doing:

$("#myid").data("progressbar")

So to use this:

var progressBar = $("#myid").data("progressbar");
if ( progressBar == null ) {
    // handle case when no progressbar is setup for my selector
} else {
    alert("The value is: " + progressBar.value());
}

Answer 4

I prefer to use hasOwnProperty on any object in JavaScript, since it returns a boolean every time.

var hasWidget = $( "selector-here" ).data().hasOwnProperty( "widget-name-here" );
if ( hasWidget )
{
    // Put your awesome code here.
}

Which IMHO is a little better than checking null; what if it switches to undefined, which, also IMO is what it should return.

Answer 5

The DOM object will get an extra CSS class appended to it: "ui-progressbar". If you View Source on http://docs.jquery.com/UI/Progressbar then you can see a div with id=progressbar and nothing more, but if you use Firebug and click the element you can see it has a few more classed added.

Edited: I think that @jamiebarrow's solution is the more correct one here.