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>

Is this a jquery-ui question? if so please tag it correctly – Pablo Fernandez Sep 04 '10 at 06:53 — Pablo Fernandez, Sep 04 '10 at 06:53

score 62 · Answer 1 · answered Mar 15 '13 at 14:27

62

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());
                    }
});

answered Mar 15 '13 at 14:27

Pjl

1,752
18
21

3

this works for me on jQuery 1.9.x. Just what I needed thanks! – roberthuttinger Apr 09 '13 at 16:13
use `beforeActivate` as a replacement. see the docs http://jqueryui.com/upgrade-guide/1.9/#deprecated-select-event-renamed-to-beforeactivate – wal Apr 29 '13 at 14:57
@peter, Ironically, I was using an older version of jQuery, and your comment saved me some serious frustration. Thanks! – rstackhouse Jul 24 '13 at 14:00
I wish this is the chosen answer for this question. Thank you. – Zack Xu Oct 06 '14 at 16:38

score 44 · Accepted Answer · edited Nov 26 '19 at 21:52

44

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);
    }
});

edited Nov 26 '19 at 21:52

bzuo

105
1
7

answered Sep 04 '10 at 10:36

Yi Jiang

49,435
16
136
136

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? – Bob76 Sep 10 '10 at 20:56
@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. – Yi Jiang Sep 11 '10 at 01:15
Thanks much Yi. I think our code is based on http://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. – Bob76 Sep 11 '10 at 04:37
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. – Bob76 Sep 12 '10 at 02:45
2

I think using "show" instead of "select" might do the trick. Thanks. – Bob76 Sep 12 '10 at 02:50
1

On a side note: `activate:` worked for me. Since JQueryUI- 1.10 `select` event is no more! – Adriano Jul 22 '13 at 15:36
@Bob76 Thanks. If is needed do some action over the content of the tab should be used "show" instead of "select" – leticia May 29 '14 at 17:48

Alan Wells · Answer 3 · 2014-02-11T21:31:24.877

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>

score 3 · Answer 4 · answered May 13 '14 at 19:38

3

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

answered May 13 '14 at 19:38

Vinay Anantharaman

139
1
8

score 2 · Answer 5 · answered Nov 19 '14 at 20:23

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>

Good practice to use event delegation! – Aurovrata Feb 18 '21 at 10:08 — Aurovrata, Feb 18 '21 at 10:08

score 2 · Answer 6 · answered Sep 04 '10 at 10:57

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/

score -2 · Answer 7 · answered Jan 03 '18 at 06:18

-2

Simply use the on click event for tab shown.

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

answered Jan 03 '18 at 06:18

Rizwan Mughal

17
2

Question is about Jquery UI tabs, not BS tabs. – Vivek Vikranth Aug 14 '18 at 11:58

jQuery - trapping tab select event

7 Answers7

Linked