KCTechNet
asked on
select first tab where class = blah
I am doing some data validation that will add a class for a tab when rules are not met.
How do you set focus on the first tab that has a certain class?
How do you set focus on the first tab that has a certain class?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Here is my current code that adds the tabs.
and here is the code where I try and assign the class if validation is not met.
function createTabs(){
var tabs = $("#tabs").tabs();
var tabTemplate = "<li><a href='#{href}'>#{label}</a></li>",
tabCounter = 0;
var varParams = "" ;
$.getJSON( 'DynamicReturn.asp',{proc:"GetPMSections",params: varParams}, function (data) {
$.each(data, function (key, value) {
var label = value.ButtonText,
id = value.HeaderID ,
li = $( tabTemplate.replace( /#\{href\}/g, "#" + id ).replace( /#\{label\}/g, label ) );
tabs.find( ".ui-tabs-nav" ).append( li );
tabs.append( "<div id='" + id + "'></div>" );
tabs.tabs( "refresh" );
tabCounter++;
fillTab(value.HeaderID);
});
tabs.tabs('select', 0);
startCheck=true;
});
}
and here is the code where I try and assign the class if validation is not met.
function checkSelected(sideNumber) {
var canContinue=1;
$('#th'+ sideNumber + currTab).css("color","black")
var n = $('#Table99'+currTab).find(":checkbox:checked").size(); //a check here = completed survey
if (n == 0) {
var n = $('.Side' + sideNumber, '#Table1'+currTab).find(":checkbox:checked").size();
if (n == 0) {
$('#th' + sideNumber + currTab)
.css("color","red")
$('#'+currTab).addClass('toFix');
canContinue = 0;
}
}
return canContinue
}
ASKER
Since I couldn't get the Class code to work, I did a work-around. While looping through the tabs to do data-validation, I stored the index of the first tab that had issues. Then I selected that tab at the end.
function saveForm(doSave) {
var canContinue = 1;
firstError=-1;
if ((rFlag== 0) && (doSave)) { //1 = read only, no need to validate
var tabCount = $('#tabs').tabs("length");
for (var i=0;i<tabCount;i++)
{
$("#tabs").tabs('select', i);
if ((checkSelected(1)+ checkSelected(2)) < 2){
alert('If not fully explored/implemented, then you need to select at least one item in the first and second column');
canContinue = 0;
if (firstError==-1){firstError=i};
}
else {
var formData = $('#constants,#form'+ currTab).serialize();
$.get('savePMSurvey.asp',formData, function(data){
answerHeaderID = data;
$('#answerHeaderID').val(data);
}); //end get
}
}
//$('.toFix:first').focus();
if (firstError!=-1){
$("#tabs").tabs('select', firstError);
}
}
return canContinue;
}
ASKER
I guess the original suggestion would work, but I couldn't test it as I guess I wasn't able to add the class to the tab itself.
ASKER
So is there a way to select tab that contains an element with that class?
Something like:
$("#tabs").tabs( '.toFix:first').focus());
either that or how do I make sure I am assigning the class to the currently selected tab?