jQuery - trapping tab select event

0 votes

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>

Jul 25 in Web Development by gaurav
• 17,580 points
12 views

1 answer to this question.

0 votes

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 Jul 26 by rajatha
• 7,040 points

Related Questions In Web Development

0 votes
1 answer

jQuery get value of select onChange

To get the value and text of ...READ MORE

answered Jun 23 in Web Development by rajatha
• 7,040 points
18 views
0 votes
1 answer

JQuery - Change event using element by name

How to trigger a event with event ...READ MORE

answered Jun 28 in Web Development by rajatha
• 7,040 points
24 views
0 votes
0 answers

Getting the source of this click event in JQuery

I have multiple dynamically created buttons with ...READ MORE

Jul 21 in Web Development by gaurav
• 17,580 points
14 views
0 votes
0 answers

Getting the source of this click event in JQuery

I have multiple dynamically created buttons with ...READ MORE

Jul 22 in Web Development by gaurav
• 17,580 points
14 views
0 votes
1 answer

TypeError: $(...).autocomplete is not a function

You would definitely have missed the Jquery ...READ MORE

answered Feb 23 in JQuery by Aditya
• 7,300 points
336 views
0 votes
0 answers

jQuery UI DatePicker - Change Date Format

I am using the UI DatePicker from ...READ MORE

Jun 23 in Web Development by gaurav
• 17,580 points
11 views
0 votes
1 answer

jQuery dialog popup

This HTML is fine: <a href="#" id="contactUs">Contact Us</a> ...READ MORE

answered Jun 28 in Web Development by rajatha
• 7,040 points
14 views
0 votes
1 answer

Date range picker on jquery ui datepicker

Thanks I need this kind of code. ...READ MORE

answered Jun 27 in Web Development by rajatha
• 7,040 points
53 views
0 votes
1 answer

$("#select option:second").val() jquery - keep select second value of select box option

Yes, you want the special jQuery eq() selector. ...READ MORE

answered Jun 22 in Web Development by rajatha
• 7,040 points
7 views
0 votes
1 answer

jQuery get value of select onChange

Try this- $('select').on('change', function() { alert( this.value ...READ MORE

answered Jun 23 in Web Development by rajatha
• 7,040 points
21 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP