Need to know if a jQuery UI Widget has been applie

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 to the DOM object. I'm getting a JavaScript error right now when I access an option.

I have a DOM object that has the progressbar (http://docs.jquery.com/UI/Progressbar) attached to it (maybe). In another thread, I'm trying to access the options using domObj.progressbar("option", "value").

How do I determine if that domObj has a progressbar attached?

Answer 1

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 2

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 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

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.

Answer 5

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