Tutorial :JQuery - Widget Public Methods


If I create a JQuery widget (code example below), and then define a "public" method, is there any other way to call the method other than using the following form?


I would like to create a series of widgets that all define the same methods (basically implementing the same interface), and be able to call the method without knowing anything about which widget I currently am invoking the method on. In the current form, I need to know that I am executing the method on the "list" widget.

Below is an example of creating a widget with the "public" method.

 (function($) {      var items = [];      var itemFocusIdx = 0;        $.widget("ui.list", {          // Standard stuff          options : { ... },          _create : function() { ... },          destroy : function() { ... },            // My Public Methods          publicMethod : function() { ... }          ...      });  }(jQuery));  


jQuery UI widgets use jQuery's $.data(...) method to indirectly associate the widget class with the DOM element. The preferred way to call a method on the widget is exactly what was described by Max...


...but if you want to field a return value, you'll have better luck calling it this way, via the data method:


However, using the second way side-steps the whole jQuery UI widget pattern, and should probably be avoided if possible.


Slightly off-topic, I know, but you may want to look at jquery Entwine.

This provides a form of inheritance and polymorphism which allows some clever behaviour with simple code. It sounds like this would do what you are trying to do.


lets say you have list, list2, and superList... let's call "publicMethod" on for each of them:

$.fn.callWidgetMethod = function(method) {    var $this = this,        args = Array.prototype.slice.call(arguments, 1);      // loop though the data and check each piece of data to    // see if it has the method    $.each(this.data(), function(key, val) {      if ($.isFunction(val[method])) {        $this[key].apply($this, args);          // break out of the loop        return false;      }    });  }    $("#some-element").list();  $("#another-element").list2();  $("#hydrogen").superList();    $("#some-element").callWidgetMethod("publicMethod");  $("#another-element").callWidgetMethod("publicMethod");  $("#hydrogen").callWidgetMethod("publicMethod");  


This solution is inspired by @Jiaaro's solution, but I needed a return value and implemented as a JavaScript function rather than extending jQuery:

var invokeWidgetMethod = function(methodName, widgetElem)      {          var $widgetElem = $(widgetElem),              widgetData = $widgetElem.data(),              dataName,              dataObject;            for(dataName in widgetData)          {              dataObject = widgetData[dataName];              if ($.isFunction(dataObject[methodName])) {                  return dataObject[methodName]();              }          }      }  


Try this:



How about this one:


As you are extending ui.list with your key:value pair set

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »