function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Vandana Rattan 4Vandana Rattan 4 

Apex:tab enable/disable on button click with Javascript

Hi All,

I am using RichFaces.switchTab('j_id0:frm:tabPanel','j_id0:frm:tabId','tabname'); to navigate between tabs. I want to disbale all tabs and enable them only when Continue or previous button is clicked. However if I set the property disabled="true" for a tab and navigate to it using  RichFaces.switchTab('j_id0:frm:tabPanel','j_id0:frm:tabId','tabname'); navigation does happen but the tab is blank and still disabled. I tried setting the classes using:

document.getElementById("j_id0:frm:tab_cell").className = "rich-tabhdr-cell-active";
 document.getElementById('j_id0:frm:tab_lbl').className ="rich-tab-header rich-tab-active activeTab   ";

this does take effect but still the tab is disabled and blank.

Kindly suggest.

Regards,
Vandana
pconpcon
Can you please include the entire page (or at least a stripped down version of the page) that demonstrates the issue?  I'm not familiar with the RichFaces methods, so having a reproducer would be helpful.

NOTE: When adding code please use the "Add a code sample" button (icon <>) to increase readability and make it easier to reference.
Vandana Rattan 4Vandana Rattan 4
Hi pcon,

Code is huge. So I am just attaching snippets. VF Page:
  
<apex:page standardController="Case" extensions="NERController" showHeader="false" standardStylesheets="false" docType="html-5.0" applyBodyTag="false" applyHtmlTag="true">
    <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'/> 
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'/>
    <apex:includeScript id="script2" value="{!URLFOR($Resource.ChargentCases__CreditCardJS, 'bililiteRange.js')}" loadOnReady="false"/>
    <apex:stylesheet value="https://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
    <!--<apex:includeScript value="https://code.jquery.com/jquery-1.9.1.min.js"/>-->
    
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"/>
    <apex:includeScript value="https://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"/>
    <link rel="stylesheet" type="text/css" href="{!$Resource.NERCSS}"/>
    <script type="text/javascript" src="{!$Resource.NERJS}"/>
    <meta http-equiv="X-Frame-Options" content="deny" />
       
    <apex:form id="frm" style="width: 100%; height:100%; background-color: white; display: inline-block; text-align: center;" enctype="multipart/form-data">  
        
        <apex:outputPanel id="all" layout="block" style="display: inline-block; text-align: left; width:80%;">
            
            <apex:outputPanel id="header" layout="block" style="background-color: white;">
        
              
                </apex:outputPanel>
            <br></br>

            <apex:tabPanel switchType="client" selectedTab="regEligibility" id="tabPanel" tabClass="activeTab" inactiveTabClass="inactiveTab">
        
                <apex:tab label="Registration eligibility" name="regEligibility1" id="regEligibility" style="background-color: white;">
                	
                    <apex:outputPanel layout="block">   
                        <!--<div class="tooltip" style="display:inline" target="_blank">-->
                        
                         
                        <apex:outputPanel layout="block">
                        <apex:outputText value="Are you a Member of Engineers Australia?" style="font-family:Open Sans; font-size:15px; font-weight:bold;"/>
                            <apex:outputPanel layout="block" >

                        <apex:selectList id="exstEAMem" value="{!case.Are_you_a_Member_of_Engineers_Australia__c}" title="Are you a Member of Engineers Australia" size="1" style="text-align: left;" onchange="hideLink();">
                            <apex:selectOption itemValue="select" itemLabel="-- Please Select --" />
                            <apex:selectOption itemValue="yes" itemLabel="Yes" />
							<apex:selectOption itemValue="no" itemLabel="No" />
                            <!--<apex:actionSupport event="onchange" reRender="createLink" />-->
                        </apex:selectList>

                        <apex:outputText id="errexstEAMem" value="Error: Please select a value" style="color:red;display:none;font-family:Open Sans;"/>
                            </apex:outputPanel>
                        </apex:outputPanel>
                               
                       
                        <br></br>
                    	<apex:outputPanel id="createLink">
                            
                        	<apex:outputPanel layout="block"  styleClass="requiredBlock" >
                           
                                <apex:outputText value="Have you created an EA ID? If not you will need one to progress your application." style="font-family:Open Sans; font-size:15px; font-weight:bold;"/> <br></br> 
                                <apex:outputText value="Please create an " style="font-family:Open Sans; font-size:12px; "/><apex:outputLink value="https://www.engineersaustralia.org.au/portal/profile/create" id="theLink" target="_blank">EA ID here.</apex:outputLink>
                    		</apex:outputPanel>
                    </apex:outputPanel>
        				
                        <br></br>
        				
        				
					<html>
                        <table style="width:100%">
                            
                       <tr style="width=100%;">
                           <td style="align:left;width:20%;"><apex:commandButton id="contBtn" value="Continue" onclick="if (!checkRequiredFields()) return false; enableNer(); return false;"/></td>
                           <td></td>
                           
                           <!--<td style="align:right;width:20%;"><apex:commandButton id="subBtn" value="Submit" onclick="if (!checkRequiredFields()) return false; showSpinner(); disableButton(this);" rerender="all"/></td>-->
                            </tr>
                       </table>
				</html>

                    <!--<apex:commandButton value="Continue" action="{!enabletab2}" rerender="tabPanel"/>-->
                </apex:tab>
        		<apex:tab label="NER Areas of Practice" name="nerAreas1" id="nerAreas" style="background-color: white;">
                    
					<apex:outputPanel layout="block" >   
                       
                         <apex:outputPanel layout="block" styleClass="headersmall">
                            <h1><apex:outputText value="NER Areas of Practice" style="font-family:Open Sans; font-weight:bold;"/></h1>
                        <!--<apex:selectList id="stateWorkingIn" value="{!case.Australian_state_primarily_working_in__c}" title="Are you a Member of Engineers Australia" size="1" />-->
                        </apex:outputPanel>
                        <apex:outputPanel layout="block" styleClass="requiredBlock" id="ner1">
    					<apex:outputText value="Please select one or more Areas of Practice in which you are seeking NER registration." style="font-family:Open Sans; font-size:15px; font-weight:bold;"/>
						</apex:outputPanel>
						
						<!--<apex:outputPanel layout="block" id="ner11">-->
                        <apex:inputCheckbox id="nerchck1" style="width:10px;height:10px;" value="{!case.Biomedical__c}" />
                                                           
                  
                    </apex:outputPanel>
					<html>
                        <table style="width:100%">
                            
                       <tr style="width=100%;">
                           <td style="align:left;width:20%;"><apex:commandButton id="contNerBtn" value="Continue" onclick="if (!checkNER()) return false; enableAboutYou(); return false;"/></td>
                           <td><apex:commandLink value="Previous" onclick="enableRegElg();  check(); return false;" style="font-family:Open Sans; font-weight:bold;"/></td>
                           
                           <!--<td style="align:right;width:20%;"><apex:commandButton id="subBtn" value="Submit" onclick="if (!checkRequiredFields()) return false; showSpinner(); disableButton(this);" rerender="all"/></td>-->
                            </tr>
                       </table>
				</html>
				</apex:tab>
				
                
                
        
            </apex:tabPanel>

        </apex:outputPanel>
        
    </apex:form>
	
</apex:page>

Javascript:
  
$j = jQuery.noConflict();
        
       
	window.onload=function()
    {
       
        document.getElementById("over").style.display='none';
      
        var exstMemb = document.getElementById('j_id0:frm:exstEAMem');
      
        if((exstMemb.value == 'select') || (exstMemb.value == 'yes')){
        	document.getElementById('j_id0:frm:createLink').style.display = 'None';
        }
        document.getElementById('clear').disabled = true;
        document.getElementById('clear1').disabled = true;
        document.getElementById('clear2').disabled = true;
        document.getElementById('clear3').disabled = true;
    }
    
    function hideLink(){
    	var exstMemb = document.getElementById('j_id0:frm:exstEAMem');
        //alert('valllllllll>>' + exstMemb.value);
        if((exstMemb.value == 'select') || (exstMemb.value == 'yes')){
        	document.getElementById('j_id0:frm:createLink').style.display = 'None';
        }
        else if(exstMemb.value == 'no'){
        	document.getElementById('j_id0:frm:createLink').style.display = '';
        }
    }
	

	function check(){
    
        var opt1 = document.getElementById('j_id0:frm:chckOpt1');
        var opt2 = document.getElementById('j_id0:frm:chckOpt2');
        var opt3 = document.getElementById('j_id0:frm:chckOpt3');
        var opt4 = document.getElementById('j_id0:frm:chckOpt4');
        
       
       
        
        if(opt1.checked == true && opt2.checked == false && opt3.checked == false && opt4.checked == false ){
           
            document.getElementById('j_id0:frm:opt2OP').style.display = 'None';
            document.getElementById('j_id0:frm:opt3OP').style.display = 'None';
            document.getElementById('j_id0:frm:opt4OP').style.display = 'None';
        }
        else if(opt1.checked == false && opt2.checked == false && opt3.checked == false && opt4.checked == false){
        	document.getElementById('j_id0:frm:opt2OP').style.display = '';
            document.getElementById('j_id0:frm:opt3OP').style.display = '';
            document.getElementById('j_id0:frm:opt4OP').style.display = '';
        }
        if(opt2.checked == true && opt1.checked == false && opt3.checked == false && opt4.checked == false){
            document.getElementById('j_id0:frm:opt1OP').style.display = 'None';
            document.getElementById('j_id0:frm:opt3OP').style.display = 'None';
            document.getElementById('j_id0:frm:opt4OP').style.display = 'None';
        }
         else if(opt2.checked == false && opt1.checked == false && opt3.checked == false && opt4.checked == false){
        	document.getElementById('j_id0:frm:opt1OP').style.display = '';
            document.getElementById('j_id0:frm:opt3OP').style.display = '';
            document.getElementById('j_id0:frm:opt4OP').style.display = '';
        }
       if(opt3.checked == true  && opt1.checked == false && opt2.checked == false && opt4.checked == false){
            document.getElementById('j_id0:frm:opt1OP').style.display = 'None';
            document.getElementById('j_id0:frm:opt2OP').style.display = 'None';
            document.getElementById('j_id0:frm:opt4OP').style.display = 'None';
        }
         else if(opt3.checked == false && opt1.checked == false && opt2.checked == false && opt4.checked == false){
        	document.getElementById('j_id0:frm:opt1OP').style.display = '';
            document.getElementById('j_id0:frm:opt2OP').style.display = '';
            document.getElementById('j_id0:frm:opt4OP').style.display = '';
        }
        if(opt4.checked == true && opt1.checked == false && opt2.checked == false && opt3.checked == false){
            document.getElementById('j_id0:frm:opt1OP').style.display = 'None';
            document.getElementById('j_id0:frm:opt2OP').style.display = 'None';
            document.getElementById('j_id0:frm:opt3OP').style.display = 'None';
        }
         else if(opt4.checked == false && opt1.checked == false && opt2.checked == false && opt3.checked == false){
        	document.getElementById('j_id0:frm:opt1OP').style.display = '';
            document.getElementById('j_id0:frm:opt2OP').style.display = '';
            document.getElementById('j_id0:frm:opt3OP').style.display = '';
        }
    }

        


		function checkNER(){
           
            var err = false;
            var ner1 = document.getElementById('j_id0:frm:nerchck1');
            var ner2 = document.getElementById('j_id0:frm:nerchck2');
            var ner3 = document.getElementById('j_id0:frm:nerchck3');
            var ner4 = document.getElementById('j_id0:frm:nerchck4');
            var ner5 = document.getElementById('j_id0:frm:nerchck5');
            var ner6 = document.getElementById('j_id0:frm:nerchck6');
            var ner7 = document.getElementById('j_id0:frm:nerchck7');
            var ner8 = document.getElementById('j_id0:frm:nerchck8');
            
           
            
            if(ner1.checked == false && ner2.checked == false && ner3.checked == false && ner4.checked == false && ner5.checked == false && ner6.checked == false && ner7.checked == false && ner8.checked == false){
            	
                err = true;
                document.getElementById('j_id0:frm:errNER').style.display = "block";
            }
            else {
            	err = false;
                document.getElementById('j_id0:frm:errNER').style.display = "none";
            }
            return !err;
        }
		
		function checkRequiredFields() {
          
        	var err1 = false;
            var err2 = false;
            var err3 = false;
            var err4 = false;
            var err5 = false;
            var err6 = false;
            var err7 = false;
            var err8 = false;
            var exstMemb = document.getElementById('j_id0:frm:exstEAMem');
            var memNo = document.getElementById('j_id0:frm:eaId');
            var firstName = document.getElementById('j_id0:frm:frstName');
            var lastName = document.getElementById('j_id0:frm:lastName');
            var email = document.getElementById('j_id0:frm:emlAddress');
            var phNo = document.getElementById('j_id0:frm:phNumber');
            var selState = document.getElementById('j_id0:frm:state');
            var opt1 = document.getElementById('j_id0:frm:chckOpt1');
            var opt2 = document.getElementById('j_id0:frm:chckOpt2');
            var opt3 = document.getElementById('j_id0:frm:chckOpt3');
            var opt4 = document.getElementById('j_id0:frm:chckOpt4');
            
           
            if(exstMemb.value == 'select'){
            	document.getElementById('j_id0:frm:errexstEAMem').style.display = "block";
                err1= true;
                //return !err;
            }
            
            if(exstMemb.value != 'select'){
                document.getElementById('j_id0:frm:errexstEAMem').style.display = "none";
                err1=false;
                
            }
            
            if(memNo.value==''){
            	document.getElementById('j_id0:frm:erreaId').style.display = "block";
                err2= true;
                //return !err;
            }
            else if(memNo.value != ''){
                document.getElementById('j_id0:frm:erreaId').style.display = "none";
                err2=false;
                
            }
           
            if(firstName.value==''){
            	document.getElementById('j_id0:frm:errfrstName').style.display = "block";
                err3= true;
            }
            else if(firstName.value != ''){
                document.getElementById('j_id0:frm:errfrstName').style.display = "none";
                err3=false;
                
            }
            
            if(lastName.value==''){
            	document.getElementById('j_id0:frm:errlastName').style.display = "block";
                err4= true;
            }
            else if(lastName.value != ''){
                document.getElementById('j_id0:frm:errlastName').style.display = "none";
                err4=false;
            }
           
            if(email.value==''){
            	document.getElementById('j_id0:frm:erremlAddress').style.display = "block";
                err5= true;
            }
            else if(email.value != ''){
                
                document.getElementById('j_id0:frm:erremlAddress').style.display = "none";
                var emailAdd = email.value;
                var lat=emailAdd.indexOf("@");
                var lstr=emailAdd.length;
                var ldot=emailAdd.indexOf(".");
              
                if(emailAdd.indexOf("@") == -1){
                	err5 = true;
                    document.getElementById('j_id0:frm:errInvalidEmlAddress').style.display = "block";
                    //return !err;
                }
                if((emailAdd.indexOf("@") == -1) || (emailAdd.indexOf("@") == 0) || (emailAdd.indexOf("@") == lstr)){
                	err5 = true;
                    document.getElementById('j_id0:frm:errInvalidEmlAddress').style.display = "block";
                }
                if((emailAdd.indexOf(".") == -1) || (emailAdd.indexOf(".") == 0) || (emailAdd.indexOf(".") == lstr)){
                	err5 = true;
                    document.getElementById('j_id0:frm:errInvalidEmlAddress').style.display = "block";
                }
                if(emailAdd.indexOf("@",(lat+1))!=-1){
                	err5 = true;
                    document.getElementById('j_id0:frm:errInvalidEmlAddress').style.display = "block";
                }
                if((emailAdd.substring(lat-1,lat)== ".") || (emailAdd.substring(lat+1,lat+2)==".")){
                	err5 = true;
                    document.getElementById('j_id0:frm:errInvalidEmlAddress').style.display = "block";
                }
                if(emailAdd.substring(".",lat+2)==-1){
                	err5 = true;
                    document.getElementById('j_id0:frm:errInvalidEmlAddress').style.display = "block";
                }
                if (emailAdd.indexOf(" ")!=-1){
                	err5 = true;
                    document.getElementById('j_id0:frm:errInvalidEmlAddress').style.display = "block";
                }
                if(err5!=true){
                	err5 = false;
                    document.getElementById('j_id0:frm:errInvalidEmlAddress').style.display = "none";
                }
                }
            
            if(phNo.value==''){
            	document.getElementById('j_id0:frm:errphNumber').style.display = "block";
                err6 = true;
            }
            else if(phNo.value != ''){
                document.getElementById('j_id0:frm:errphNumber').style.display = "none";
                err6 = false;
               
            }
            
            if(selState.value=='select'){
            	document.getElementById('j_id0:frm:errstate').style.display = "block";
                err7 = true;
            }
            else if(selState.value != 'select'){
                document.getElementById('j_id0:frm:errstate').style.display = "none";
                err7 = false;
                
            }
            if(opt1.checked == false && opt2.checked == false && opt3.checked == false && opt4.checked == false){
                err8 = true;
                document.getElementById('j_id0:frm:errOpt').style.display = "block";
            }
            else if(opt1.checked == true || opt2.checked == true || opt3.checked == true || opt4.checked == true){
                err8 = false;
                document.getElementById('j_id0:frm:errOpt').style.display = "none";
            }
        
            	if(err1 == true || err2 == true || err3 == true || err4 == true || err5 == true || err6 == true || err7 == true || err8 == true){
                	return false;
                }
            else{
                return true;
                }
     
        }
	function enableYourQual(){
       
    	RichFaces.switchTab('j_id0:frm:tabPanel','j_id0:frm:quals','quals1');
   
    }

	function enableNer(){
        RichFaces.switchTab('j_id0:frm:tabPanel','j_id0:frm:nerAreas','nerAreas1');
       
    }

	
	function enableRegElg(){
    	RichFaces.switchTab('j_id0:frm:tabPanel','j_id0:frm:regEligibility','regEligibility1');
    }

Thanks for your time.
pconpcon
Just out of curiosity, is there any particular reason you are doing it this way instead of reRendering the tabPanel and dynamically choosing the active tab / disabling tabs via the controller?
Vandana Rattan 4Vandana Rattan 4
Hi pcon,

I did that coz all my formatting was getting lost if I rerendred the tabPanel to navigate between tabs. Look at a query I raised earlier:

https://developer.salesforce.com/forums/ForumsMain?id=906F00000005I2jIAE

Thanks,
Vandana
Vandana Rattan 4Vandana Rattan 4
For anyone else who faces a similar issue here is what solved my issue:

On click of Next button I called functions to enable tabs:

function enableXXX(){
        
        RichFaces.switchTab('j_id0:frm:tabPanel','j_id0:frm:quals','quals1');
}

On load all the tabs were disabled as:

if(document.getElementById("j_id0:frm:XXX") != null)
        {
        document.getElementById("j_id0:frm:XXX").onclick="return false;";
        }