+ Start a Discussion
Vandana Rattan 4Vandana Rattan 4 

Visualforce rerender formatting issue with Tabs (Urgent!!)

Hi VF Gurus!!
I am developing a Visualforce page with multiple tabs to be used in our force.com site. On the tabs I validate all data and click Continue or Previous buttons to navigate to next or previous tab. I set selectedTab for seting which tab to enable or disbale and then reRender the tabpanel. However, when I do this all page formatting is lost. On inspecting one of the dropdown lists on first page I found that after rerender some <div> and <span> tags are not being applied on re render. Has anyone observed same behaviour? How can I work around this?

VF:
<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://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"/>
    <style>

    .inactiveTab { background-color: white; color:black; background-image:none}
        
    .header {
        background-color: lightgray;
        text-align: left;
        color: black;
        font-size: 20px;
        height: 100px;
 
    }
    .activeTab {
        background-color: #e6dead;
        text-align: left;
        color: black;
        font-size: 15px;
        height: 20px;
        font-family: Open Sans;
        font-weight: bold
        
    }
    .ui-btn-text{
        text-align: left;
    }
   
    .requiredBlock {background-color: transparent; }

    .requiredBlock::before { content: "*"; font-size: 1.5em; font-weight: bold;  color: #c00; }
        
   
    </style>

    <apex:form id="frm" style="width: 100%; height:100%; background-color: white; display: inline-block; text-align: center;">  
        <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:image url="{!$Resource.NERBanner}" style="display: block; "/>
                </apex:outputPanel>
            <br></br>
        
            <apex:tabPanel switchType="client" selectedTab="{!selectedTab}" id="tabPanel" tabClass="activeTab" inactiveTabClass="inactiveTab">
        
                <apex:tab label="Registration eligibility" name="regEligibility" id="regEligibility" style="background-color: white;" disabled="{!istab1disabled}">
                    
                    <apex:outputPanel layout="block">   
                        
                        <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;">
                            <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" rendered="{!IF(case.Are_you_a_Member_of_Engineers_Australia__c == 'no',TRUE,FALSE)}">
                           
                                <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>
                        
                        <apex:outputPanel layout="block" styleClass="requiredBlock">
                                
                                    <apex:outputText value="Please provide your EA ID / Member Number" style="font-family:Open Sans; font-size:15px; font-weight:bold;"/> <br></br>   
                                                                                  
                                    <apex:inputText value="{!case.Applicatnt_s_EA_ID__c}" id="eaId" styleClass="inputText" style="font-family:Open Sans;"/>
                                      
                                    <apex:outputText id="erreaId" value="Error: This field is required. Please enter a value." style="color:red;display:none;font-family:Open Sans;"/>
                                
                            </apex:outputPanel>
                        <br></br>
                        
                        <apex:outputPanel layout="block" styleClass="requiredBlock">
                            <apex:outputText value="First Name" style="font-family:Open Sans; font-size:15px; font-weight:bold;"/> <br></br> 
                            <apex:inputText value="{!case.First_Name__c}" id="frstName" styleClass="inputText" style="font-family:Open Sans;"/>
                            <apex:outputText id="errfrstName" value="Error: This field is required. Please enter a value." style="color:red;display:none;font-family:Open Sans;"/>
                        </apex:outputPanel>
                    <br></br>
                        <apex:outputPanel layout="block" styleClass="requiredBlock">
                            <apex:outputText value="Last Name" style="font-family:Open Sans; font-size:15px; font-weight:bold;"/> <br></br> 
                            <apex:inputText value="{!case.Last_Name__c}" id="lastName" styleClass="inputText" style="font-family:Open Sans;"/>
                            <apex:outputText id="errlastName" value="Error: This field is required. Please enter a value." style="color:red;display:none;font-family:Open Sans;"/>
                        </apex:outputPanel>
                        
                        <apex:outputPanel layout="block" styleClass="requiredBlock">
                            <apex:outputText value="Email Address" style="font-family:Open Sans; font-size:15px; font-weight:bold;"/> <br></br> 
                            <apex:inputText value="{!case.Email_address__c}" id="emlAddress" styleClass="inputText" style="font-family:Open Sans;"/>
                            <apex:outputText id="erremlAddress" value="Error: This field is required. Please enter a value." style="color:red;display:none;font-family:Open Sans;"/>
                            <apex:outputText id="errInvalidEmlAddress" value="Please enter a valid email address." style="color:red;display:none;font-family:Open Sans;"/>
                        </apex:outputPanel>
                        <br></br>
                        <apex:outputPanel layout="block" styleClass="requiredBlock">
                        <apex:outputText value="Phone Number" style="font-family:Open Sans; font-size:15px; font-weight:bold;"/> <br></br> 
                        <apex:inputText value="{!case.Phone_Number__c}" id="phNumber" styleClass="inputText" style="font-family:Open Sans;"/>
                        <apex:outputText id="errphNumber" value="Error: This field is required. Please enter a value." style="color:red;display:none;font-family:Open Sans;"/>
                        </apex:outputPanel>
                        <br></br>
                        <apex:outputPanel layout="block" styleClass="requiredBlock">
                        <apex:outputText value="Australian state primarily working in" style="font-family:Open Sans; font-size:15px; font-weight:bold;"/>
                            <apex:selectList id="state" value="{!case.Australian_state_primarily_working_in__c}" title="In which Australian state do you primarily work?" size="1" style="text-align: left;">
                                <apex:selectOption itemValue="select" itemLabel="-- Please Select --" />
                                <apex:selectOption itemValue="ACT" itemLabel="ACT" />
                                <apex:selectOption itemValue="NSW" itemLabel="NSW" />
                                <apex:selectOption itemValue="VIC" itemLabel="VIC" />
                                <apex:selectOption itemValue="OA" itemLabel="OA" />
                            </apex:selectList>
                            
                        </apex:outputPanel> 
                        <br></br>
                        <apex:outputPanel layout="block" styleClass="headersmall">
                            <h1><apex:outputText value="Professional Indemnity Insurance" style="font-family:Open Sans; font-weight:bold;"/></h1>
                       
                        </apex:outputPanel> 
                        
                            <apex:outputPanel >
                         <apex:outputPanel id="opt1OP">        
                        <apex:outputPanel layout="block" styleClass="requiredBlock">
                        <apex:outputText value="Option 1" style="font-family:Open Sans; font-size:15px; font-weight:bold;"/>
                        </apex:outputPanel>
                        
                        <apex:outputPanel layout="block" id="opt1CB">
                        <apex:inputCheckbox id="chckOpt1" value="{!val1}"/>
                                                           
                            <apex:outputLabel value="I am a sole practitioner" for="chckOpt1"/>
          
                        </apex:outputPanel>
                                </apex:outputPanel>
                               
                        <br></br>
                         
                        <apex:outputPanel id="opt2OP">
                        <apex:outputPanel layout="block" styleClass="requiredBlock">
                        <apex:outputText value="Option 2" id="opt2lbl"/>
                        </apex:outputPanel>

                        <apex:outputPanel layout="block" >
                        <apex:inputCheckbox id="chckOpt2" value="{!val2}" />
                                                           
                            <apex:outputLabel value="I am employed by a corporation or partnership for="chckOpt2"/>
                           
                        </apex:outputPanel> 
                            </apex:outputPanel>
                          
                        <br></br>
                        <apex:outputPanel id="opt3OP">
                        <apex:outputPanel layout="block" styleClass="requiredBlock">
                        <apex:outputText value="Option 3" style="font-family:Open Sans; font-size:15px; font-weight:bold;"/>
                        </apex:outputPanel>

                        <apex:outputPanel layout="block">
                        <apex:inputCheckbox id="chckOpt3" style="width:10px;height:10px;" value="{!val3}" onchange="check();"/>
                                                           
                            <apex:outputLabel value="I am employed by a Commonwealth/State/Local Government" style="font-family:Open Sans; font-size:15px; font-weight:bold; color:black;" for="chckOpt3"/>
                            
                        </apex:outputPanel> 
                        </apex:outputPanel>
                        <br></br>

                        <apex:outputPanel id="opt4OP">
                        <apex:outputPanel layout="block" styleClass="requiredBlock">
                        <apex:outputText value="Option 4"/>
                        </apex:outputPanel>

                        <apex:outputPanel layout="block">
                        <apex:inputCheckbox id="chckOpt4" style="width:10px;height:10px;" value="{!val4}"/>
                                                           
                            <apex:outputLabel value="I am not covered by a PII policyfor="chckOpt4"/>
                        </apex:outputPanel>
                        </apex:outputPanel></apex:outputPanel>


                    </apex:outputPanel>

                    <html>
                        <table style="width:100%">
                            
                       <tr style="width=100%;">
                           <td style="align:left;width:20%;"><apex:commandButton id="contBtn" value="Continue" action="{!enabletab2}" rerender="tabPanel" onclick="if (!checkRequiredFields()) return false;"/></td>
                           <td></td>
                          
                            </tr>
                       </table>
                </html>

                </apex:tab>
                <apex:tab label="NER Areas of Practice" name="nerAreas" id="nerAreas" style="background-color: white;" disabled="{!istab2disabled}">
                    
                    <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: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:inputCheckbox id="nerchck1" style="width:10px;height:10px;" value="{!val1}" />
                                                           
                            <apex:outputLabel value="Biomedical" style="font-family:Open Sans; font-size:15px; font-weight:bold; color:black;" for="nerchck1"/>
                        <br></br>
                        <apex:inputCheckbox id="nerchck2" style="width:10px;height:10px;" value="{!val1}" />
                                                           
                            <apex:outputLabel value="Chemical" style="font-family:Open Sans; font-size:15px; font-weight:bold; color:black;" for="nerchck2"/>
                        <br></br>
                         <apex:inputCheckbox id="nerchck3" style="width:10px;height:10px;" value="{!val1}" />
                                                           
                            <apex:outputLabel value="Civil" style="font-family:Open Sans; font-size:15px; font-weight:bold; color:black;" for="nerchck3"/>
                        <br></br>
                         <apex:inputCheckbox id="nerchck4" style="width:10px;height:10px;" value="{!val1}" />
                                                           
                            <apex:outputLabel value="Electrical" style="font-family:Open Sans; font-size:15px; font-weight:bold; color:black;" for="nerchck4"/>
                        <br></br>
                           
                           
                        <apex:outputText id="errNER" value="Error: Please select at least one option" style="color:red;display:none;font-family:Open Sans;"/>
                   
                    </apex:outputPanel>
                    <html>
                        <table style="width:100%">
                            
                       <tr style="width=100%;">
                           <td style="align:left;width:20%;"><apex:commandButton id="contNerBtn" value="Continue" action="{!enabletab3}" rerender="tabPanel" onclick="if (!checkNER()) return false;"/></td>
                           <td><apex:commandLink value="Previous" action="{!enabletab1}" rerender="tabPanel" style="font-family:Open Sans; font-weight:bold;"/></td>
                           
                           </tr>
                       </table>
                </html>
                </apex:tab>
                
        
            </apex:tabPanel>

        </apex:outputPanel>
        
    </apex:form>
    <script type="text/javascript">

    
    function checkRequiredFields() {
           
            var err = 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');
           
         
            if(exstMemb.value == 'select'){
                document.getElementById('j_id0:frm:errexstEAMem').style.display = "block";
                err= true;
            }
            if(exstMemb.value != 'select'){
                document.getElementById('j_id0:frm:errexstEAMem').style.display = "none";
                err=false;
            }
            if(memNo.value==''){
                document.getElementById('j_id0:frm:erreaId').style.display = "block";
                err= true;
            }
            else if(memNo.value != ''){
                document.getElementById('j_id0:frm:erreaId').style.display = "none";
                err=false;
                
            }
            if(firstName.value==''){
                document.getElementById('j_id0:frm:errfrstName').style.display = "block";
                err= true;
            }
          
     
            return !err;
        }

        
    </script>
</apex:page>
Controller:
 
public class NERController {
    
    public ApexPages.StandardController standardContactController;
    public String selectedTab;
    public Case objCase;
   
    public List<SelectOption> types{
        get{
            
            types = new List<SelectOption>();
             Schema.sObjectType sobject_type = objCase.getSObjectType();
            Schema.DescribeSObjectResult sobject_describe = sobject_type.getDescribe();
             Map<String, Schema.SObjectField> field_map = sobject_describe.fields.getMap();
            List<Schema.PicklistEntry> pick_list_values = field_map.get('Evidence_of_Engineering_qualification__c').getDescribe().getPickListValues();
            for (Schema.PicklistEntry a : pick_list_values) {
               types.add(new selectOption(a.getLabel(), a.getValue()));
              }
          
          return types;
        }
        set;}
    Public Attachment myfile{
        get {
          if (myfile == null)
            myfile = new Attachment();
          return myfile;
        }
      set;
  }
       
    public NERController.NERController(ApexPages.StandardController controller){
        standardContactController = controller;
        this.objCase =(Case) controller.getRecord();
        myfile = new Attachment();
        selectedTab = 'regEligibility';
    }
    
    public string getselectedtab() {
     return selectedtab;
      }
    
    public boolean getistab1disabled() {
        return selectedTab <> 'regEligibility';
      }

      public boolean getistab2disabled() {
        return selectedTab <> 'nerAreas';
      }
    
    public void enabletab1() {
        selectedtab = 'regEligibility';
      }

      public void enabletab2() {
        selectedtab = 'nerAreas';
      }
    
   
    public Id createCase(){
          
        Id ftRecTypeId = [SELECT Id from recordType where name='National Engineering Register' and sObjectType='Case' LIMIT 1].id;
      
       
        Id gatewayId = [Select Id from ChargentBase__Gateway__c where Name='eWay Gateway' LIMIT 1].Id;
         Case insCase = new Case();
       
             insCase.RecordTypeId = ftRecTypeId;
            insCase.Status = 'New';
            insCase.Origin = 'Web';
            
           
            insert insCase;
        return insCase.Id;
    }
 }


 
scottbcovertscottbcovert
Hi Vandana,

It looks like you're trying to do some form validation before moving to the next tab, but the way you're using the apex:commandButton tag the tabPanel will rerender even if the validation fails, which may be why you're seeing the form reset. You could try changing the apex:commandButton to a generic button with an onClick attribute that first performs the validation for the required fields and then calls an apex:actionFunction if the validation passes. In the apex:actionFunction you could call your Apex action method and perform the reRender. Good luck!
Vandana Rattan 4Vandana Rattan 4
Thanks scottbcovert. I used javascript to navigate to next/previous tabs instead of rerender. The formatting is preserved now. For others who face simial issue:

Using following code in javascript did the trick for me:


jQuery.noConflict(); //This is important as without this below statement won't work
RichFaces.switchTab('j_id0:frm:tabPanel','j_id0:frm:abtYou','abtYou1');

Regards,
Vandana