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

Frédéric Hamidi · Accepted Answer · 2012-11-02T12:14:33.487

48

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.

edited Nov 02 '12 at 12:14

answered Dec 14 '11 at 15:04

Frédéric Hamidi

258,201
41
486
479

1

Thanks! data was not a very good name :D But it works, thats the important part :P – Anders Dec 14 '11 at 15:13
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. – Anders Dec 14 '11 at 15:27
1

Here's the official reference: https://api.jqueryui.com/jquery.widget/ ("Instance" section) – noitseuq Mar 12 '14 at 17:03
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 – Jim May 20 '15 at 11:39
2

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 :-) – Alexander Derck Sep 22 '16 at 07:46
In jQuery UI 1.11 they [introduced the `instance` "method"](https://jqueryui.com/upgrade-guide/1.11/#added-instance-method-on-the-bridge-to-return-widget-instance), which is even simpler -- see [Andy's answer](https://stackoverflow.com/a/46486045/1026) – Nickolay May 08 '18 at 17:57

score 9 · Answer 2 · answered Sep 29 '17 at 09:37

9

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

answered Sep 29 '17 at 09:37

Andy Braham

9,594
4
48
56

This is **the** answer if you're using [jQuery UI 1.11+](https://jqueryui.com/upgrade-guide/1.11/#added-instance-method-on-the-bridge-to-return-widget-instance), which added this feature. The documentation is at http://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). – Nickolay May 08 '18 at 18:00
THIS IS THE ANSWER – Nicolas Thery Aug 26 '20 at 13:14

score 1 · Answer 3 · answered Jun 25 '12 at 10:45

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.

score 1 · Answer 4 · answered Feb 08 '16 at 13:47

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. :)

Accessing widget instance from outside widget

4 Answers4

Linked