You need to sign in to do that
Don't have an account?
Using radio buttons to rerender a pageblocksection
I am trying to use the result of the user selecting a radio button to rerender a pageblocksection ( before they would press the save button )
I've attempted this by using Javascript and the 'onclick' parameter to the apex:selectOption
<script> var displayDetails = true; function setDisplayDetails(toDisplay) { displayDetails = toDisplay; } function getDisplayDetails() { return displayDetails; } </script> <apex:form > <apex:pageBlock mode="edit"> <apex:pageBlockSection title="Section 1" columns="1"> <apex:pageBlockSectionItem > <apex:outputText value="Select yes or no?" /> <apex:selectRadio value="{!Custom_Object__c.Custom_object_field__c}"> <apex:selectOption itemValue="true" itemLabel="Yes" onclick="setDisplayDetails(false);" /> <apex:selectOption itemValue="false" itemLabel="No" onclick="setDisplayDetails(true);" /> <apex:actionSupport event="onchange" rerender="Details" /> </apex:selectRadio> </apex:pageBlockSectionItem> </apex:pageBlockSection> <apex:pageBlockSection title="Details" columns="1" id="Details" rendered="getDisplayDetails();">
I've discovered that the rendered="getDisplaydetails();" section isn't working as it is expecting a value that equates to a boolean and doesn't appear the call a Javascript function.
I'm beginning to think that I will need a custom controller to return a value to the pageBlockSection.
Then the question becomes, how do I set the value of the selected radio button into the custom controller?
Can I do this from the Javascript function setDisplayDetails?
Hi,
I Think we can use HTML <span> here!!
VF Page:
<apex:page controller="cntrlrRadio1" id="pg1">
<apex:form id="frm1">
<apex:pageBlock mode="edit" id="pgBlock">
<apex:pageBlockSection title="Section 1" columns="1" id="pgBlockSection">
<apex:pageBlockSectionItem id="pgBlockSectionitem">
<apex:outputText value="Select yes or no?" />
<apex:selectRadio id="idRadio1" onclick="boolFunction(this);" >
<apex:selectOption itemValue="true" itemLabel="Yes" />
<apex:selectOption itemValue="false" itemLabel="No" />
</apex:selectRadio>
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
</apex:pageBlock>
<span id="idSpan" style = "display:none">
<apex:pageBlock >
<apex:pageBlockSection title="Details" columns="1" id="Details">
<apex:outputLabel> HOORAY!!! </apex:outputLabel>
</apex:pageBlockSection>
</apex:pageBlock>
</span>
</apex:form>
<script>
function boolFunction(variable)
{
var bool = variable.value;
if(bool == 'true')
{
document.getElementById('idSpan').style.display = 'block';
}
else
document.getElementById('idSpan').style.display = 'none';
}
</script>
</apex:page>
Hope this is helpful !!!!
All Answers
Hi,
I Think we can use HTML <span> here!!
VF Page:
<apex:page controller="cntrlrRadio1" id="pg1">
<apex:form id="frm1">
<apex:pageBlock mode="edit" id="pgBlock">
<apex:pageBlockSection title="Section 1" columns="1" id="pgBlockSection">
<apex:pageBlockSectionItem id="pgBlockSectionitem">
<apex:outputText value="Select yes or no?" />
<apex:selectRadio id="idRadio1" onclick="boolFunction(this);" >
<apex:selectOption itemValue="true" itemLabel="Yes" />
<apex:selectOption itemValue="false" itemLabel="No" />
</apex:selectRadio>
</apex:pageBlockSectionItem>
</apex:pageBlockSection>
</apex:pageBlock>
<span id="idSpan" style = "display:none">
<apex:pageBlock >
<apex:pageBlockSection title="Details" columns="1" id="Details">
<apex:outputLabel> HOORAY!!! </apex:outputLabel>
</apex:pageBlockSection>
</apex:pageBlock>
</span>
</apex:form>
<script>
function boolFunction(variable)
{
var bool = variable.value;
if(bool == 'true')
{
document.getElementById('idSpan').style.display = 'block';
}
else
document.getElementById('idSpan').style.display = 'none';
}
</script>
</apex:page>
Hope this is helpful !!!!
Thanks, that was very helpful and works like a charm.
Steve