Detecting tab getting selected under jQueryUI

Question

I am trying to detect when a new tab on my jQueryui tab component is clicked. I have followed several guides and blogs, but can't wrap my head around the process. I have the following:

$('#tabs').tabs({
  select: function(event,ui) {
  alert('selected');
  return false;
  },                
}); 

I don't know what I'm missing, but the alert never fires. I'm am not strong with jQuery so I'm probably making a stupid mistake, so any help will be appreciated.

Thanks, Kris

Update: jsfiddle example http://jsfiddle.net/T7czp/16/

Answer 1

Latest version use

$('#tabs').tabs({
  activate: function(event,ui) {
    alert('selected: '+ui.index);
  }
});

Answer 2

Are you getting any errors? The trailing , after your select will break the script in some browsers.

This works as seen in this fiddle: http://jsfiddle.net/T7czp/15/

$('#tabs').tabs({
  select: function(event,ui) {
     alert('selected: '+ui.index);
  }
});

Answer 3

jquery UI seems to have changed slightly since the last accepted answer.

The ui parameter defined in teh activate function is now an object that looks similar to this:

Object { oldTab={...}, oldPanel={...}, newTab={...}, more...}

The index method is inside each of these. So the updated access method is:

$('#tabs').tabs({
  activate: function(event,ui) {
    alert('selected: '+ui.newTab.index());
  }
});

Answer 4

@Kristofer

You code is correct.

The only thing you must remove in order to the tab get selected is the line:

return false;

because according with the Tabs component documentation:

Note that if a handler for the tabsselect event returns false, the clicked tab will not become selected (useful for example if switching to the next tab requires a form validation).

(the "tabselect" event corresponds to the "select" handler)

Answer 5

You need to bind the event to the tab.

$("#tabs").bind("tabsselect", function(e, tab) {
  alert("The tab at index " + tab.index + " was selected");
});