When using the onChange handler for TabNavigator, changing the selectedIndex
does not correctly render the style of the new selectedIndex (tab/page).
Illustrated below, when a user goes to change a tab from the first tab and
s/he has not filled in a particular data field (in my case, "Docket"), I issue
an alert and return the user to the first tab. This works as expected;
however, the actual tab is not correctly highlighted; the focus (e.g., the
emphasis color) still remains on the tab the user tried to select and not on
the first tab ... I've tried a number of work-arounds; all dissappointing. TIA.

Jim Wilson

<cfformgroup type="tabnavigator" id="csmTabNavigator"
onChange="checkTabNavigation();">
...
</cfformgroup>

function checkTabNavigation(){
if(csmTabNavigator.selectedIndex!=0){
if(Docket.text==''){
alert('You must select a docket to proceed.','CORPORATE SYSTEMS');
csmTabNavigator.selectedIndex=0;
return;
}
}
}

Okay, here's an answer/workaround. Use the function that gets triggered when
the user clicks the alert box to set the selectedIndex. This gives it proper
sequencing, and the user goes back to the first tab. (The function is the
fourth parameter with the ActionScript alert() ...).


// checks for changes in tabNavigator
function checkTabNavigation(){
if(csmTabNavigator.selectedIndex!=0){
if(Docket.text==''){
alert('Please select a docket to proceed.', 'CORPORATE SYSTEMS' ,OK,
setTab0 );
_root.csmTabNavigator.selectedIndex=0; // optional -- keeps user from
seeing tab s/he selected
return;
}
}
} // end of checkTabNavigation()

// sets the tabNavigator to 0
function setTab0(){
_root.csmTabNavigator.selectedIndex=0;
return;
} // end of setTab0()