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?
KCTechNetAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Rainer JeschorCommented:
$('.classname:first').focus();
HTH
Rainer
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
KCTechNetAuthor Commented:
I must be assigning the class to the wrong item within the tab, not the tab itself.  

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?
0
KCTechNetAuthor Commented:
Here is my current code that adds the tabs.
    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;
        });
    }

Open in new window


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
    }

Open in new window

0
KCTechNetAuthor Commented:
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;
    }

Open in new window

0
KCTechNetAuthor Commented:
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.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.