Accessing widget instance from outside widget

Question

This is a simple widget mock:

(function ($) {

    $.widget("ui.myDummyWidget", {

        options: {
        },

        _create: function () {
        },
        hide: function () {
            this.element.hide();
        },
        _setOption: function (key, value) {
            $.Widget.prototype._setOption.apply(this, arguments);
        },

        destroy: function () {
            $.Widget.prototype.destroy.call(this);
        }

    });

} (jQuery));

It only adds a method hide that you can call to hide the element. Easy if done from within widget

this.hide();

But a common scenario is that you want to call methods on a widget instance from the outside (Ajax update, or other external events)

So what is the best way of accessing the widget instance? One way is to add the reference to the widget to the element, ugly...

_create: function () {
    this.element[0].widget = this;
},

Then you can access it from the outside doing

this.dummy = $("#dummy").myDummyWidget();
this.dummy[0].widget.hide();

Marsipobranch

Answer 1

The widget engine already does what you want: it calls data() internally to associate the widgets and their respective elements:

$("#dummy").myDummyWidget();
// Get associated widget.
var widget = $("#dummy").data("myDummyWidget");
// The following is equivalent to $("#dummy").myDummyWidget("hide")
widget.hide();

Update: From jQuery UI 1.9 onwards, the key becomes the widget's fully qualified name, with dashes instead of dots. Therefore, the code above becomes:

// Get associated widget.
var widget = $("#dummy").data("ui-myDummyWidget");

Using unqualified names is still supported in 1.9 but is deprecated, and support will be dropped in 1.10.

Jahdai

Thanks! data was not a very good name :D But it works, thats the important part :P – Marsipobranch

btw, if you like me do not like strings or use Resharper and VS2010 you can do .data().myDummyWidget; and benefit from intelisence and compile warnings. – Marsipobranch

Here's the official reference: api.jqueryui.com/jquery.widget ("Instance" section) – Mauriciomaurie

This must be the stackoverflow question that I come back to the most. (We have a lot of widgets going on at my work :)) +1 – Levan

I really need to learn to read the whole answer before brainlessly trying to figure out what isn't working for 15 minutes. Your 'update' section did it for me, thanks :-) – Addition

In jQuery UI 1.11 they introduced the instance "method", which is even simpler -- see Andy's answer – Tirol

Answer 2

There is also a method created when a Widget is defined, you can simply call the instance method to get the actual Widget instance like so:

//Create the Instance
$("#elementID").myDummyWidget(options);

//Get the Widget Instance
var widget = $("#elementID").myDummyWidget("instance");

Or you can do it as a one-liner:

var widget = $("#elementID").myDummyWidget(options).myDummyWidget("instance");

Stoichiometry

This is the answer if you're using jQuery UI 1.11+, which added this feature. The documentation is at api.jqueryui.com/jQuery.widget/#method-instance (the sections "Methods" and "Instance" in the top part of that page are also useful to understand how this works). – Tirol

THIS IS THE ANSWER – Bruise

Answer 3

You can also use the jQuery custom selector to find the widget elements before calling data on them to get the actual widget instance e.g.

$(this.element).find(":ui-myDummyWidget").each(function (index, domEle) {
    var widgetObject = $(this).data("myDummyWidget");
    widgetObject.hide();
    // this == domEle according to the jQuery docs
});

That code finds all of the instances of ui.myDummyWidget (note the change of period . to hyphen - ) that have been created and attached to another widget holder.

Untitled

Answer 4

I'm not sure in which version it was introduced but, if all you wish to do is calling a widget's method you can use this:

$("#myWidget").myDummyWidget("hide");

Where myWidget is the id of the DOM element holding an instance of your widget. This will call the hide method.

If the method you need to call needs parameters you can pass them after the method name, like this:

$("#myWidget").myDummyWidget("setSpecialAnswer",42);

Also, you can look for all instances of your widget using the special selector :widgetName and call methods on them. The following code snippet will call the hide method on all myDummyWidget widgets.

$(":ui-myDummyWidget").myDummyWidget("hide");

Mind that the widget fullname is composed of a prefix ("ui" in the example) and the widget's name ("myDummyWidget") separated by a score ("-").

You should use your own prefix for your custom widgets; "ui" is generally reserved for jQueryUI pre-built widgets.

I hope that helps. :)

Alecto