Link to home
Start Free TrialLog in
Avatar of KCTechNet
KCTechNetFlag for United States of America

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?
ASKER CERTIFIED SOLUTION
Avatar of Rainer Jeschor
Rainer Jeschor
Flag of Germany image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of KCTechNet

ASKER

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?
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

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

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.