jQuery UI: Calling widget methods directly September 30th, 2011

A typical jQuery plugin is just another function attached to the jQuery object. As a plugin developer you write a function, attach it to jQuery.fn (just an alias for its prototype) and your plugin method is magically available to all jQuery instances. As a plugin user, you normally execute the plugin by calling a method on the jQuery object. Something like

// jCarouselLite is the plugin in this case
$("#carousel").jCarouselLite(options); 

The above call returns the jQuery object on which the plugin was originally invoked. That way you can chain method calls and marvel at the beauty of our wide one-liner solution. But not for long!!!

What if you would like to control the behavior of the plugin after initialization? What if you want to stop() what the plugin is doing, maybe add() something to it or maybe even destroy() it? There was no easy answer to that question and every plugin developer was left to his own creativity to come out with a solution.

var $carousel = $("#carousel").jCarouselLite(options); 
$carousel.stop();  // You cannot do this
$carousel.run(); // Nope! You cannot do this either
$carousel.destroy(); // Nope! You get the idea...

While developing jQuery UI, the team there recognized this as a generic problem and came up with a generic solution. They called it the Widget Factory and popularized it as a way to develop Stateful plugins as opposed to traditional Stateless plugins. Take a look here to know more about how to develop jQuery plugins using the Widget Factory Pattern. All jQuery UI widgets are examples of plugins developed using the Widget Factory. Lets take one interaction with the jQuery UI

var $accordion = $(“#accordion”).accordion(options);
$accordion.accordion(“enable”); // Enable the accordion
$accordion.accordion(“activate”, 1); // Activate the second tab

As can be seen above, now you can interact with the Accordion after initialization by passing a method name as string. For instance, “enable” is a method that takes zero arguments and enables the accordion and “activate” is another method that takes one argument (an index) to be activated and opens up the accordion tab at that index.

It works, but wouldn’t it be cool if we don’t pass in method names as strings and would get to call the methods directly on $accordion – like $accordion.enable()?

It so happens that the $accordion is not an instance of the widget itself, but a jQuery object that wraps the DOM element representing the accordion. In most situations that is what you will need and so that is what is given to you.

The good news is that, the actual widget instance is stored with the corresponding DOM element using jQuery.data(). The plugin’s name is used as its key. Therefore, you can call $accordion.data(“accordion”) and enjoy direct access to all its plugin methods without retorting to indirect, string based approach anymore.

var $accordion = $(“#accordion”).accordion(options).data(“accordion”);
$accordion.enable(); // Enable the accordion
$accordion.activate(1); // Activate the second tab

Now you can have your cake and eat it too…

13 Responses to “jQuery UI: Calling widget methods directly”

  1. 1. mycrazydream on December 24th, 2011 at 6:54 am

    Awesome. It may not seem like a big deal at first, but this simple change makes building a widget-extending class that much more intuitive.

  2. 2. BrianJ on January 17th, 2012 at 4:38 pm

    I am using your carousel to scroll through a series of Notifications to the users on my site. The problem lies in the fact I need to be able to add and remove notification content dynamically once the AJAX call completes. Can you use this method to disable jCarouselLite and then Reactivate once I have added the new notifications to the ?

  3. 3. Vikesh Kumar on February 5th, 2012 at 8:12 am

    Maybe this is aside from the topic, but I would like to ask you if you do have something for learning html5 and css3.

  4. 4. dancing with stars contestants on February 6th, 2012 at 7:36 am

    May be, I’m not sure though it’s fantastic input you mentioned here. Finally I enjoyed this concept. Thanks!

  5. 5. Fhulu on February 7th, 2012 at 6:52 am

    Super cool! Thanks for this.

  6. 6. webdesign on February 7th, 2012 at 7:59 am

    About jQuery UI Calling widget methods directly whatever you input here seems to me very complex topic. I enjoyed this impressive tutorial. Thanks for published!

  7. 7. pre construction condos in Mississauga on May 30th, 2012 at 11:40 am

    Can you use this method to disable jCarouselLite and then Reactivate once I have added the new notifications to the ?

  8. 8. sms message on July 12th, 2012 at 6:02 am

    Thanks for published!

  9. 9. Webdesign on July 22nd, 2012 at 5:13 pm

    Nice tutorial, keep up the good work

  10. 10. Tucson Massage Therapy on August 1st, 2012 at 9:02 am

    developed using the Widget Factory. Lets take one interaction with the jQuery UI

  11. 11. barry on August 20th, 2012 at 8:58 pm

    my jcarousellite is broken!
    it was working fine but client updated site.
    can you take a look?
    http://brinsterinc.com/camber/test.html
    probably something obvious, but i’m stumped!

  12. 12. JavaPins on August 28th, 2012 at 6:41 pm

    Ganesh » Blog Archive » jQuery UI: Calling widget methods directly…

    Thank you for submitting this cool story – Trackback from JavaPins…

  13. 13. Anup Vasudeva on September 5th, 2012 at 11:29 am

    Let’s say you have 10 jCarouselLite components on the page. So would that be OK to have 10 different variables inorder to call the Widget’s public methods?