jQuery UI Tabs Callbacks

Posted on 28 March 2008 by Johannes Fahrenkrug. Tags: JavaScript Programming jquery
Somehow the jquery ui tabs callbacks as described on the website (and as described here) don't seem to work for me. So I took a look at the source code and this is how I got them to work:
$("#tabbook > ul").tabs().bind("show.ui-tabs", 
    function(event, ui) {
        console.log('show tab');
         if (ui.panel.id == 'id-of-some-tab-page') {
               console.log('It is showing!');
These are the events you can register callbacks for:
  • load.ui-tabs
  • show.ui-tabs
  • select.ui-tabs
  • add.ui-tabs
  • remove.ui-tabs
  • enable.ui-tabs
  • disable.ui-tabs
The "ui" object that's passed into the callback function has lots of interesting properties (just dump it with Firebug's console.log or console.dir) but you'll probably be most interested in 'ui.panel.id' since that will hold the id of the tab page that the event has been triggered for.


Anonymous said...

Great work-around, worked for me!

However, I noticed just shortly after that the method described on the website refers to *version 3* of the jQuery Tabs, and I still had an older package. Now that I downloaded the new version, the other method works as well. (There are a few other differences, so it's worth watching out for the version!)

April 17, 2008 12:05 AM


Please keep it clean, everybody. Comments with profanity will be deleted.

blog comments powered by Disqus