+ Start a Discussion
Steve_FinlaySteve_Finlay 

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?

 

Best Answer chosen by Admin (Salesforce Developers) 
GomsueyGomsuey

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

GomsueyGomsuey

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 !!!!

This was selected as the best answer
Steve_FinlaySteve_Finlay

Thanks, that was very helpful and works like a charm.

 

Steve