Hi 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. How can I check to see if

For example:

I have a DOM object that has the 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?


The DOM object will get an extra CSS class appended to it: "ui-progressbar". If you View Source on 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.

Ok, on my custom ui widget, I'll just add a class to the dom object and check for it. Thanks a bunch for the idea
+2  A: 

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


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());
I think this way is more elegant than colinramsay's suggestion. It's also applicable to other plugins that store their 'API objects' using the jQuery data function. And using the Firebug console to inspect what $("#myid").data() returns is very useful :)