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-02 12:14:33Z

49

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 2, 2012 at 12:14

answered Dec 14, 2011 at 15:04

Frédéric Hamidi

264k42 gold badges497 silver badges486 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Anders Over a year ago

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

Anders Over a year ago

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.

noitseuq Over a year ago

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

Jim Over a year ago

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

Alexander Derck Over a year ago

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

|

Andy Braham · Accepted Answer · 2017-09-29 09:37:36Z

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, 2017 at 9:37

Andy Braham

10.2k4 gold badges56 silver badges60 bronze badges

2 Comments

Nickolay Over a year ago

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

Nicolas Thery Over a year ago

THIS IS THE ANSWER

Danack · Accepted Answer · 2012-06-25 10:45:09Z

1

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.

answered Jun 25, 2012 at 10:45

Danack

25.8k16 gold badges93 silver badges123 bronze badges

Comments

Pittigghio · Accepted Answer · 2016-02-08 13:47:24Z

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

Collectives™ on Stack Overflow

Accessing widget instance from outside widget

4 Answers 4

6 Comments

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related