jQuery - trapping tab select event

Question

I'm a jQuery noob and I'm trying to figure out how to trap the tab selected event. Using jQuery 1.2.3 and corresponding jQuery UI tabs (not my choice and I have no control over it). It's a nested tab with the first level div name - tabs. This is how I initialized the tabs

$(function() {
       $('#tabs ul').tabs();
});

$(document).ready(function(){
    $('#tabs ul').tabs('select', 0); 
}); 

I'm not able to figure out how to trap any of the events or properties (selected tab, when tab clicked, etc). Would appreciate any help on this...

I tried things like:

$('#tabs ul').bind('tabsselect', function(event, ui) {
    selectedTab = ui.index;
    alert('selectedTab : ' + selectedTab);
});

              (OR)

$('#tabs').bind('tabsselect', function(event, ui) {

with no success.

Below is the markup

<div id="tabs">
<UL>
    <LI><A href="#fragment-1"><SPAN>Tab1</SPAN></A></LI>
    <LI><A href="#fragment-2"><SPAN>Tab2</SPAN></A></LI>
    <LI><A href="#fragment-3"><SPAN>Tab3</SPAN></A></LI>
    <LI><A href="#fragment-4"><SPAN>Tab4</SPAN></A></LI>
</UL>

<DIV id=fragment-1>
<UL>
    <LI><A href="#fragment-1a"><SPAN>Sub-Tab1</SPAN></A></LI>
    <LI><A href="#fragment-1b"><SPAN>Sub-Tab2</SPAN></A></LI>
    <LI><A href="#fragment-1c"><SPAN>Sub-Tab3</SPAN></A></LI>
</UL>
</DIV>
.
.
.

</DIV>

Bayne

Is this a jquery-ui question? if so please tag it correctly – Gpo

Answer 1

The correct method for capturing tab selection event is to set a function as the value for the select option when initializing the tabs (you can also set them dynamically afterwards), like so:

$('#tabs, #fragment-1').tabs({
  select: function(event, ui){
    // Do stuff here
  }
});

You can see the actual code in action here: http://jsfiddle.net/mZLDk/

---

Edit: With the link you gave me, I've created a test environment for jQuery 1.2.3 with jQuery UI 1.5 (I think?). Some things obviously changed from then. There wasn't a separate ui object which was separated from the original event object. The code looks something like this:

// Tab initialization
$('#container ul').tabs({
    select: function(event) {
        // You need Firebug or the developer tools on your browser open to see these
        console.log(event);
        // This will get you the index of the tab you selected
        console.log(event.options.selected);
        // And this will get you it's name
        console.log(event.tab.text);
    }
});

Phew. If there's anything to learn here, it's that supporting legacy code is hard. See the jsfiddle for more: http://jsfiddle.net/qCfnL/1/

---

Edit: For those who is using newer version of jQuery, try the following:

$("#tabs").tabs({
    activate: function (event, ui) {
        console.log(event);
    }
});

Inherit

This works beautifully in the jsfiddle, but when i copy it to my code, i get a "index" is null or not an object error. Thoughts? – Bayne

@user You are using jQuery 1.2.3, right? That demo was set up with 1.3.2, with jQuery UI 1.7.2. That's the oldest version they have. It's impossible to find the needed documentation now for versions that old, so this is about as much as we could do, although you can try replacing select with tabselect - the changelog indicated that select was introduced sometime after tabselect to replace it. – Inherit

Thanks much Yi. I think our code is based on cse-mjmcl.cse.bris.ac.uk/blog/2008/05/15/1210851116949.html and that uses a very early version of ui tabs. I was reading thru the docs from the site this demo was based on and I see references to tabsselect like you mentioned. Hope I'm able to figure out a solution. Thanks. – Bayne

This is fantastic, Yi. Thank you very much. I don't think i would have figured this out ever. I tried the fiddle, the "options.selected" gives me the previously selected tab's index. Would you know anything that would give the current selected tab's index? The tab.text doesn't seem to work in IE6 (sorry, not my choice. corporate policy:) ) But, I'm glad the event trapping works now and if nothing works, I might be able to put some kind of hack to get it working. – Bayne

I think using "show" instead of "select" might do the trick. Thanks. – Bayne

On a side note: activate: worked for me. Since JQueryUI- 1.10 select event is no more! – Tympanic

@Bayne Thanks. If is needed do some action over the content of the tab should be used "show" instead of "select" – Schifra

Answer 2

it seems the old's version's of jquery ui don't support select event anymore.

This code will work with new versions:

$('.selector').tabs({
                    activate: function(event ,ui){
                        //console.log(event);
                        console.log(ui.newTab.index());
                    }
});

Undertow

this works for me on jQuery 1.9.x. Just what I needed thanks! – Hodges

use beforeActivate as a replacement. see the docs jqueryui.com/upgrade-guide/1.9/… – Jeffry

@peter, Ironically, I was using an older version of jQuery, and your comment saved me some serious frustration. Thanks! – Dictum

I wish this is the chosen answer for this question. Thank you. – Melloney

Answer 3

This post shows a complete working HTML file as an example of triggering code to run when a tab is clicked. The .on() method is now the way that jQuery suggests that you handle events.

jQuery development history

To make something happen when the user clicks a tab can be done by giving the list element an id.

<li id="list">

Then referring to the id.

$("#list").on("click", function() {
 alert("Tab Clicked!");
});

Make sure that you are using a current version of the jQuery api. Referencing the jQuery api from Google, you can get the link here:

https://developers.google.com/speed/libraries/devguide#jquery

Here is a complete working copy of a tabbed page that triggers an alert when the horizontal tab 1 is clicked.

<!-- This HTML doc is modified from an example by:  -->
<!-- http://keith-wood.name/uiTabs.html#tabs-nested -->

<head>
<meta charset="utf-8">
<title>TabDemo</title>

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/south-street/jquery-ui.css">

<style>
pre {
clear: none;
}
div.showCode {
margin-left: 8em;
}
.tabs {
margin-top: 0.5em;
}
.ui-tabs { 
padding: 0.2em; 
background: url(http://code.jquery.com/ui/1.8.23/themes/south-street/images/ui-bg_highlight-hard_100_f5f3e5_1x100.png) repeat-x scroll 50% top #F5F3E5; 
border-width: 1px; 
} 
.ui-tabs .ui-tabs-nav { 
padding-left: 0.2em; 
background: url(http://code.jquery.com/ui/1.8.23/themes/south-street/images/ui-bg_gloss-wave_100_ece8da_500x100.png) repeat-x scroll 50% 50% #ECE8DA; 
border: 1px solid #D4CCB0;
-moz-border-radius: 6px; 
-webkit-border-radius: 6px; 
border-radius: 6px; 
} 
.ui-tabs-nav .ui-state-active {
border-color: #D4CCB0;
}
.ui-tabs .ui-tabs-panel { 
background: transparent; 
border-width: 0px; 
}
.ui-tabs-panel p {
margin-top: 0em;
}
#minImage {
margin-left: 6.5em;
}
#minImage img {
padding: 2px;
border: 2px solid #448844;
vertical-align: bottom;
}

#tabs-nested > .ui-tabs-panel {
padding: 0em;
}
#tabs-nested-left {
position: relative;
padding-left: 6.5em;
}
#tabs-nested-left .ui-tabs-nav {
position: absolute;
left: 0.25em;
top: 0.25em;
bottom: 0.25em;
width: 6em;
padding: 0.2em 0 0.2em 0.2em;
}
#tabs-nested-left .ui-tabs-nav li {
right: 1px;
width: 100%;
border-right: none;
border-bottom-width: 1px !important;
-moz-border-radius: 4px 0px 0px 4px;
-webkit-border-radius: 4px 0px 0px 4px;
border-radius: 4px 0px 0px 4px;
overflow: hidden;
}
#tabs-nested-left .ui-tabs-nav li.ui-tabs-selected,
#tabs-nested-left .ui-tabs-nav li.ui-state-active {
border-right: 1px solid transparent;
}
#tabs-nested-left .ui-tabs-nav li a {
float: right;
width: 100%;
text-align: right;
}
#tabs-nested-left > div {
height: 10em;
overflow: auto;
}
</pre>

</style>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>

<script>
    $(function() {
    $('article.tabs').tabs();
    });
</script>

</head>
<body>
<header role="banner">
    <h1>jQuery UI Tabs Styling</h1>
</header>

<section>

<article id="tabs-nested" class="tabs">
<script>
    $(document).ready(function(){
    $("#ForClick").on("click", function() {
        alert("Tab Clicked!");
    });
    });
</script>
<ul>
    <li id="ForClick"><a href="#tabs-nested-1">First</a></li>
    <li><a href="#tabs-nested-2">Second</a></li>
    <li><a href="#tabs-nested-3">Third</a></li>
</ul>
<div id="tabs-nested-1">
    <article id="tabs-nested-left" class="tabs">
        <ul>
            <li><a href="#tabs-nested-left-1">First</a></li>
            <li><a href="#tabs-nested-left-2">Second</a></li>
            <li><a href="#tabs-nested-left-3">Third</a></li>
        </ul>
        <div id="tabs-nested-left-1">
            <p>Nested tabs, horizontal then vertical.</p>


<form action="/sign" method="post">
  <div><textarea name="content" rows="5" cols="100"></textarea></div>
  <div><input type="submit" value="Sign Guestbook"></div>
</form>
        </div>
        <div id="tabs-nested-left-2">
            <p>Nested Left Two</p>
        </div>
        <div id="tabs-nested-left-3">
            <p>Nested Left Three</p>
        </div>
    </article>
</div>
<div id="tabs-nested-2">
    <p>Tab Two Main</p>
</div>
<div id="tabs-nested-3">
    <p>Tab Three Main</p>
</div>
</article>

</section>

</body>
</html>

Izanagi

Answer 4

In later versions of JQuery they have changed the function from select to activate. http://api.jqueryui.com/tabs/#event-activate

Defroster

Answer 5

From what I can tell, per the documentation here: http://jqueryui.com/demos/tabs/#event-select, it seems as though you're not quite initializing it right. The demos state that you need a main wrapped <div> element, with a <ul> or possibly <ol> element representing the tabs, and then an element for each tab page (presumable a <div> or <p>, possibly a <section> if we're using HTML5). Then you call $().tabs() on the main <div>, not the <ul> element.

After that, you can bind to the tabsselect event no problem. Check out this fiddle for basic, basic example:

http://jsfiddle.net/KE96S/

Verbena

Answer 6

Simply:

$("#tabs_div").tabs();
$("#tabs_div").on("click", "a.tab_a", function(){
    console.log("selected tab id: " + $(this).attr("href"));
    console.log("selected tab name: " + $(this).find("span").text());
});

But you have to add class name to your anchors named "tab_a":

<div id="tabs">
<UL>
    <LI><A class="tab_a" href="#fragment-1"><SPAN>Tab1</SPAN></A></LI>
    <LI><A class="tab_a" href="#fragment-2"><SPAN>Tab2</SPAN></A></LI>
    <LI><A class="tab_a" href="#fragment-3"><SPAN>Tab3</SPAN></A></LI>
    <LI><A class="tab_a" href="#fragment-4"><SPAN>Tab4</SPAN></A></LI>
</UL>

<DIV id=fragment-1>
<UL>
    <LI><A class="tab_a" href="#fragment-1a"><SPAN>Sub-Tab1</SPAN></A></LI>
    <LI><A class="tab_a" href="#fragment-1b"><SPAN>Sub-Tab2</SPAN></A></LI>
    <LI><A class="tab_a" href="#fragment-1c"><SPAN>Sub-Tab3</SPAN></A></LI>
</UL>
</DIV>
.
.
</DIV>

Chiaki

Good practice to use event delegation! – Grocer

Answer 7

Simply use the on click event for tab shown.

$(document).on('shown.bs.tab', 'a[href="#tab"]', function (){
});

Durwin

Question is about Jquery UI tabs, not BS tabs. – Bogart