jquery ui - call methods with same name on different widgets

Question

Suppose I have created several widgets (mywidget1, mywidget2, ...) and that all have a method with the same name (doSomething).
To invoke the method I can use:

$("#elem").widget1("doSomething");  

but this way I need to know the name of the widget (in the example widget1).
If I have an array with multiple instances of the various widgets, how can I invoke on each one the method "doSomething" without knowing the name of the widget?

Answer 1

I found this solution:

before:

var tmp = $("#elem").widget1();
myarray[i] = tmp;

now:

var tmp = $("#elem").widget1();
myarray[i] = tmp.data(ui-widget1);

in this way it is possible to directly call the method:

myarray[x].doSomething();

what do you think?
can be an efficient solution?

thanks to all

Answer 2

You can't. Two options for you:

1. Store them in separate arrays (one array for widget1, another for widget2), or

2. Store objects in the arrays containing the information about which widget relates to that entry

Here's an example of #2

var list = [
    {widget: "widget1", element: $("#elem")},
    {widget: "widget2", element: $(".some-selector")},
    {widget: "widget2", element: $("#another")},
    {widget: "widget1", element: $("div .target")}
];
$.each(list, function(i, entry) {
    entry.element[entry.widget]("doSomething");
});

Answer 3

In theory I suppose you could do something like the following:

var widgets = [widget1, widget2, widget3]; // etc, will assume they are defined already

// Access each Widget, now widget points to each of the widgets
// So we dont need to know the actual name like widget1, widget2 etc
widgets.forEach(function (widget) {
    $('#elem').widget('doSomething'); // Call the doSomething method of this widget
    $('#elem').widget.call(null, 'doSomething'); // Try this if the above fails
    $('#elem').call(widget, 'doSomething'); // Or maybe this :)
}

Anyway try the above, of the top of my head im not sure which will work. I think what you are trying to do might be a bit difficult to implement, so sorry if it doesnt work. Hopefully it will :)

Answer 4

you can have an object of functions and get the key value dynamically to use the particular function

widgets = {
    widget1 : function(value){return value;},
    widget2 : function(value){return value+1},
    widget3 : function(value){return value+2}
}; //you can have your list of functions say widgets1,2,3....

for(var k in widgets ){
  console.log(widgets[k](1));
} //to get the function name you can use the key name in the object

Example on https://gist.github.com/vishnu667/44063d64f2d1210c26c9

you can also call the function if you know the key

widgets['widget2'](10); //to directly call the function if you know the key

to Dynamically add more widgets use

function add_widget(name,widgetFunction){ //function to add widget
    widgets[name]=widgetFunction;
}

add_widget("widget4",function(value){return value+10;}); //adds a new widget to the widgets list