jQueryUI Tabs select giving unexpected index

[jcanker]

I'm using jqueryUI tabs in a new project.  I'm trying to keep the initial page as lightweight as possible by loading in .js pages as they're needed via jQuery's .load.  Central to the whole web app is the set of tabs.  When a new tab is clicked, I need to load the appropriate .js file &  pull the specific content via ajax.

 

In order to do this, I need to check the index of the newly selected tab.  the UI tabs seems to have an event for this, select, and I set it up using the documentation example.  The problem is that it returns the index of the tab that was active/selected BEFORE the tab that was just clicked.  In other words, if you click the 3rd tab after the page loads, it returns 0 instead of 2.  How do I get it to return the index of the tab that was clicked, not the tab that was selected before the click?

 

The code is called via named function, the entire function's code is below:

 

function createTabs(){
/////////////////////////////////////
//  This function creates the tabs
//  used to separate customer data
//  It utilizes the jQuery ui tabs
////////////////////////////////////
var output = '	<div id="tabContainer" class="tabwidget"> \
				<ul class="tabnav"> \
				<li><a href="#contact">Contact</a></li> \
				<li id="notesTab"><a href="#notes">Notes</a></li> \
				<li><a href="#tickets">Tickets</a></li> \
				<li><a href="#accounting">Accounting</a></li> \
				</ul> \
				<div id="contact" class="tabdiv">This is contact \
				</div> \
				<div id="notes" class="tabdiv">This is notes </div> \
				<div id="tickets" class="tabdiv">This is tickets</div> \
				<div id="accounting" class="tabdiv">this is accounting</div> \
			<\div>' ;
$('#centerColumn').prepend(output);
$('#tabContainer').tabs({ 
	fx: { height: 'toggle', opacity: 'toggle' },
	select: function(event, ui){
		var selected = $( "#tabContainer" ).tabs( "option", "selected" );
		alert ("We've clicked on the " + selected +" tab!");		
	}

});//end of .tabs 
}

[jcanker]

Fixed it:

 

changing the selected variable from:

var selected = $( "#tabContainer" ).tabs( "option", "selected" );

 

 

To:

var selected = ui.index;

gives the expected index for the newly-clicked tab.