You need to sign in to do that
Don't have an account?
Vandana 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:
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; } }
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!
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