Solved

select first tab where class = blah

Posted on 2013-05-16
5
283 Views
Last Modified: 2013-06-06
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?
0
Comment
Question by:KCTechNet
  • 4
5 Comments
 
LVL 44

Accepted Solution

by:
Rainer Jeschor earned 500 total points
Comment Utility
$('.classname:first').focus();
HTH
Rainer
0
 

Author Comment

by:KCTechNet
Comment Utility
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
 

Author Comment

by:KCTechNet
Comment Utility
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
 

Author Comment

by:KCTechNet
Comment Utility
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
 

Author Closing Comment

by:KCTechNet
Comment Utility
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

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now