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, 2022 in Web Development by gaurav
• 23,260 points
806 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, 2022 by rajatha
• 7,640 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, 2022 in Web Development by rajatha
• 7,640 points
857 views
0 votes
1 answer

JQuery - Change event using element by name

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

answered Jun 28, 2022 in Web Development by rajatha
• 7,640 points
2,399 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, 2022 in Web Development by gaurav
• 23,260 points
994 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, 2022 in Web Development by gaurav
• 23,260 points
295 views
0 votes
1 answer

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

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

answered Feb 23, 2022 in JQuery by Aditya
• 7,680 points
7,513 views
0 votes
0 answers

jQuery UI DatePicker - Change Date Format

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

Jun 23, 2022 in Web Development by gaurav
• 23,260 points
854 views
0 votes
1 answer

jQuery dialog popup

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

answered Jun 28, 2022 in Web Development by rajatha
• 7,640 points
922 views
0 votes
1 answer

Date range picker on jquery ui datepicker

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

answered Jun 27, 2022 in Web Development by rajatha
• 7,640 points
4,292 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, 2022 in Web Development by rajatha
• 7,640 points
2,394 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, 2022 in Web Development by rajatha
• 7,640 points
419 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP