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?
Who is Participating?
Rainer JeschorConnect With a Mentor Commented:
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?
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" );
            tabs.tabs('select', 0);

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)
                canContinue = 0;
        return canContinue

Open in new window

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;
        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;
                      }); //end get
            if (firstError!=-1){
                $("#tabs").tabs('select', firstError);
        return canContinue;

Open in new window

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.
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.