You need to sign in to do that
Don't have an account?
Vandana Rattan 4
Visualforce rerender formatting issue
Hi,
I am building a Visualforce page for our force.com site. I am running into a formatting issue when I try to rerender. I have 4 Checkbox option buttons. If anyone is selected others have to be collapsed. Currently I have implemented the actionSupport only for first checkbox. Other 3 checkboxes collpase properly. But if I uncheck option1 formatting for other 3 is lost. How can I resolve this issue. PFB the code for checkboxes:
Thanks in Advance.
I am building a Visualforce page for our force.com site. I am running into a formatting issue when I try to rerender. I have 4 Checkbox option buttons. If anyone is selected others have to be collapsed. Currently I have implemented the actionSupport only for first checkbox. Other 3 checkboxes collpase properly. But if I uncheck option1 formatting for other 3 is lost. How can I resolve this issue. PFB the code for checkboxes:
<apex:outputPanel layout="block" styleClass="requiredBlock" id="opt1OP"> <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" style="width:10px;height:10px;" value="{!val1}" /> <apex:outputLabel value="I am a sole practitioner" style="font-family:Open Sans; font-size:15px; font-weight:bold; color:black;" for="chckOpt1"/> <apex:actionSupport event="onchange" reRender="opt2OP,opt3OP,opt4OP" action="{!find}"/> </apex:outputPanel> <br></br> <apex:outputPanel id="opt2OP"> <apex:outputPanel layout="block" styleClass="requiredBlock" rendered="{!NOT(val1)}"> <apex:outputText value="Option 2" style="font-family:Open Sans; font-size:15px; font-weight:bold;"/> </apex:outputPanel> <apex:outputPanel layout="block" rendered="{!NOT(val1)}"> <apex:inputCheckbox id="chckOpt2" style="width:10px;height:10px;" value="{!val2}" /> <apex:outputLabel value="I am employed by a corporation or partnership" style="font-family:Open Sans; font-size:15px; font-weight:bold; color:black;" for="chckOpt2"/> <apex:outputText value="Please enter your Employer's Name" style="font-family:Open Sans; font-size:15px; font-weight:bold;"/> <apex:inputText value="{!case.Employer_s_Name__c}" id="empNameOpt2" styleClass="inputText" style="font-family:Open Sans;"/> </apex:outputPanel> </apex:outputPanel> <br></br> <apex:outputPanel id="opt3OP"> <apex:outputPanel layout="block" styleClass="requiredBlock" rendered="{!NOT(val1)}"> <apex:outputText value="Option 3" style="font-family:Open Sans; font-size:15px; font-weight:bold;"/> </apex:outputPanel> <apex:outputPanel layout="block" rendered="{!NOT(val1)}"> <apex:inputCheckbox id="chckOpt3" style="width:10px;height:10px;" value="{!val3}"/> <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:outputText value="Please enter your Employer's Name" style="font-family:Open Sans; font-size:15px; font-weight:bold;"/> <apex:inputText value="{!case.Employer_s_Name__c}" id="empNameOpt3" styleClass="inputText" style="font-family:Open Sans;"/> </apex:outputPanel> </apex:outputPanel> <br></br> <apex:outputPanel id="opt4OP"> <apex:outputPanel layout="block" styleClass="requiredBlock" rendered="{!NOT(val1)}"> <apex:outputText value="Option 4" style="font-family:Open Sans; font-size:15px; font-weight:bold;"/> </apex:outputPanel> <apex:outputPanel layout="block" rendered="{!NOT(val1)}"> <apex:inputCheckbox id="chckOpt4" style="width:10px;height:10px;" value="{!val4}"/> <apex:outputLabel value="I am not covered by a policy" style="font-family:Open Sans; font-size:15px; font-weight:bold; color:black;" for="chckOpt4"/> </apex:outputPanel> </apex:outputPanel>
Thanks in Advance.
<apex:page controller="CheckboxRerenderController">
<script>
function hide(){
if(document.getElementById('{!$Component.theform.thepageBlock.pageblocksection.inputcheckbox1}').checked==true){
document.getElementById('{!$Component.theform.thepageBlock.pageblocksection.outputLabel1}').style.display='inline';
document.getElementById('{!$Component.theform.thepageBlock.pageblocksection1.outputLabel2}').style.display='None';
document.getElementById('{!$Component.theform.thepageBlock.pageblocksection2.outputLabel3}').style.display='None';
document.getElementById('{!$Component.theform.thepageBlock.pageblocksection3.outputLabel4}').style.display='None';
document.getElementById('{!$Component.theform.thepageBlock.outputLabel01}').style.display='inline';
document.getElementById('{!$Component.theform.thepageBlock.outputLabel02}').style.display='None';
document.getElementById('{!$Component.theform.thepageBlock.outputLabel03}').style.display='None';
document.getElementById('{!$Component.theform.thepageBlock.outputLabel04}').style.display='None';
document.getElementById('{!$Component.theform.thepageBlock.pageblocksection1.inputcheckbox2}').style.display='None';
document.getElementById('{!$Component.theform.thepageBlock.pageblocksection2.inputcheckbox3}').style.display='None';
document.getElementById('{!$Component.theform.thepageBlock.pageblocksection3.inputcheckbox4}').style.display='None';
}
else{
document.getElementById('{!$Component.theform.thepageBlock.pageblocksection.outputLabel1}').style.display='inline';
document.getElementById('{!$Component.theform.thepageBlock.pageblocksection1.outputLabel2}').style.display='inline';
document.getElementById('{!$Component.theform.thepageBlock.pageblocksection2.outputLabel3}').style.display='inline';
document.getElementById('{!$Component.theform.thepageBlock.pageblocksection3.outputLabel4}').style.display='inline';
document.getElementById('{!$Component.theform.thepageBlock.outputLabel01}').style.display='inline';
document.getElementById('{!$Component.theform.thepageBlock.outputLabel02}').style.display='inline';
document.getElementById('{!$Component.theform.thepageBlock.outputLabel03}').style.display='inline';
document.getElementById('{!$Component.theform.thepageBlock.outputLabel04}').style.display='inline';
document.getElementById('{!$Component.theform.thepageBlock.pageblocksection1.inputcheckbox2}').style.display='inline';
document.getElementById('{!$Component.theform.thepageBlock.pageblocksection2.inputcheckbox3}').style.display='inline';
document.getElementById('{!$Component.theform.thepageBlock.pageblocksection3.inputcheckbox4}').style.display='inline';
}
}
</script>
<apex:form id="theform">
<apex:pageBlock id="thepageBlock">
<apex:outputLabel value="Option1" id="outputLabel01" />
<apex:pageblocksection id="pageblocksection">
<apex:inputcheckbox value="{!chkBx}" id="inputcheckbox1" onclick="hide();"/>
<apex:outputLabel value="I am a sole practitioner" id="outputLabel1"/>
</apex:pageblocksection>
<apex:outputLabel value="Option2" id="outputLabel02"/>
<apex:pageblocksection id="pageblocksection1">
<apex:inputcheckbox value="{!chkBx}" id="inputcheckbox2"/>
<apex:outputLabel value="I am employed by a corporation or partnership" id="outputLabel2"/>
</apex:pageblocksection>
<apex:outputLabel value="Option3" id="outputLabel03" />
<apex:pageblocksection id="pageblocksection2">
<apex:inputcheckbox value="{!chkBx}" id="inputcheckbox3"/>
<apex:outputLabel value="Please enter your Employer's Name" id="outputLabel3"/>
</apex:pageblocksection>
<apex:outputLabel value="Option4" id="outputLabel04" />
<apex:pageblocksection id="pageblocksection3">
<apex:inputcheckbox value="{!chkBx}" id="inputcheckbox4"/>
<apex:outputLabel value="I am employed by a Commonwealth/State/Local Government" id="outputLabel4"/>
</apex:pageblocksection>
</apex:pageBlock>
</apex:form>
</apex:page>
All Answers
<apex:page controller="CheckboxRerenderController">
<script>
function hide(){
if(document.getElementById('{!$Component.theform.thepageBlock.pageblocksection.inputcheckbox1}').checked==true){
document.getElementById('{!$Component.theform.thepageBlock.pageblocksection.outputLabel1}').style.display='inline';
document.getElementById('{!$Component.theform.thepageBlock.pageblocksection1.outputLabel2}').style.display='None';
document.getElementById('{!$Component.theform.thepageBlock.pageblocksection2.outputLabel3}').style.display='None';
document.getElementById('{!$Component.theform.thepageBlock.pageblocksection3.outputLabel4}').style.display='None';
document.getElementById('{!$Component.theform.thepageBlock.outputLabel01}').style.display='inline';
document.getElementById('{!$Component.theform.thepageBlock.outputLabel02}').style.display='None';
document.getElementById('{!$Component.theform.thepageBlock.outputLabel03}').style.display='None';
document.getElementById('{!$Component.theform.thepageBlock.outputLabel04}').style.display='None';
document.getElementById('{!$Component.theform.thepageBlock.pageblocksection1.inputcheckbox2}').style.display='None';
document.getElementById('{!$Component.theform.thepageBlock.pageblocksection2.inputcheckbox3}').style.display='None';
document.getElementById('{!$Component.theform.thepageBlock.pageblocksection3.inputcheckbox4}').style.display='None';
}
else{
document.getElementById('{!$Component.theform.thepageBlock.pageblocksection.outputLabel1}').style.display='inline';
document.getElementById('{!$Component.theform.thepageBlock.pageblocksection1.outputLabel2}').style.display='inline';
document.getElementById('{!$Component.theform.thepageBlock.pageblocksection2.outputLabel3}').style.display='inline';
document.getElementById('{!$Component.theform.thepageBlock.pageblocksection3.outputLabel4}').style.display='inline';
document.getElementById('{!$Component.theform.thepageBlock.outputLabel01}').style.display='inline';
document.getElementById('{!$Component.theform.thepageBlock.outputLabel02}').style.display='inline';
document.getElementById('{!$Component.theform.thepageBlock.outputLabel03}').style.display='inline';
document.getElementById('{!$Component.theform.thepageBlock.outputLabel04}').style.display='inline';
document.getElementById('{!$Component.theform.thepageBlock.pageblocksection1.inputcheckbox2}').style.display='inline';
document.getElementById('{!$Component.theform.thepageBlock.pageblocksection2.inputcheckbox3}').style.display='inline';
document.getElementById('{!$Component.theform.thepageBlock.pageblocksection3.inputcheckbox4}').style.display='inline';
}
}
</script>
<apex:form id="theform">
<apex:pageBlock id="thepageBlock">
<apex:outputLabel value="Option1" id="outputLabel01" />
<apex:pageblocksection id="pageblocksection">
<apex:inputcheckbox value="{!chkBx}" id="inputcheckbox1" onclick="hide();"/>
<apex:outputLabel value="I am a sole practitioner" id="outputLabel1"/>
</apex:pageblocksection>
<apex:outputLabel value="Option2" id="outputLabel02"/>
<apex:pageblocksection id="pageblocksection1">
<apex:inputcheckbox value="{!chkBx}" id="inputcheckbox2"/>
<apex:outputLabel value="I am employed by a corporation or partnership" id="outputLabel2"/>
</apex:pageblocksection>
<apex:outputLabel value="Option3" id="outputLabel03" />
<apex:pageblocksection id="pageblocksection2">
<apex:inputcheckbox value="{!chkBx}" id="inputcheckbox3"/>
<apex:outputLabel value="Please enter your Employer's Name" id="outputLabel3"/>
</apex:pageblocksection>
<apex:outputLabel value="Option4" id="outputLabel04" />
<apex:pageblocksection id="pageblocksection3">
<apex:inputcheckbox value="{!chkBx}" id="inputcheckbox4"/>
<apex:outputLabel value="I am employed by a Commonwealth/State/Local Government" id="outputLabel4"/>
</apex:pageblocksection>
</apex:pageBlock>
</apex:form>
</apex:page>
Regards,
Vandana