Menu
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>
982
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());
}
});
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);
}
});
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>
In later versions of JQuery they have changed the function from select to activate. http://api.jqueryui.com/tabs/#event-activate
42
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/
45
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
