⚠️ Archived Post
This is an archived post from my previous blog (2007-2014). It may contain outdated information, broken links, or deprecated technical content. For current writing, please see the main Writing section.

jQuery UI Tabs Callbacks

Originally published on March 28, 2008

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

Comments

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