I have a Visualforce page where the user selects a radio button to view different sections of the page. I dont have the liberty to create an extension so am stuck with just the standard controller. I have two questions:

  1. How can I reRender a section on click of a radio button?
  2. How can I identify the selected radio button, I need to use it as a merge field in the rendered attribute of the section.

Here is my page

   <apex:selectOption itemLabel="Detail View" itemValue="Detail"/>
   <apex:selectOption itemLabel="Related Data" itemValue="Related"/>
<apex:detail rendered="{!<what should I put here??> == Detail}"/>


  • Curious, why is an extension not an option? – Ralph Callaway Oct 17 '12 at 17:43

If you can't create an extension controller, then the radio button needs to be bound to a field from the object being managed. If this field is used purely inside this page, then simply put that in the description and don't put the field on any page layouts.

So if your standard controller is managing an account, you can create a text field called 'Radio_Choice__c' and bind that to the element. If you then add an actionsupport for the onchange event, then as soon as the user makes a selection, this will post back the form and apply the user's selection to the Radio_Choice__c field. The rerender attribute can be used to update just the detail view:

<apex:selectRadio value="{!Account.Radio_Choice__c}">
   <apex:selectOption itemLabel="Detail View" itemValue="Detail"/>
   <apex:selectOption itemLabel="Related Data" itemValue="Related"/>
   <apex:actionSupport event="onchange" rerender="detailView" />

Note that you don't need an action for the action support, if you don't supply one it will just post back the form, update the view state and refresh the page.

You can then render your detail section based on the value stored in the Radio_Choice__c field. Note that this needs to be wrapped inside a component (I've chosen outputPanel) that is always present on the page, otherwise you will be trying to rerender an element that doesn't exist (there's a better explanation at: http://bobbuzzard.blogspot.co.uk/2011/02/visualforce-re-rendering-woes.html):

<apex:outputPanel id="detailView">
   <apex:detail rendered="{!Acccount.Radio_Choice__c == 'Detail View'}"/>
  • I did wonder about recommending action:support but went with my reliable friend the actionFunction. How would one choose? Is one more performant than the other? ActionSupport surely seems more concise – techtrekker Oct 17 '12 at 8:22
  • I tend to use action support if I don't want to do anything other than fire that action. I use an actionfunction if I want to invoke some javascript that does some work, and then fires the action on the controller. There's very little to choose between them, aside from as you say the conciseness of actionsupport. – Bob Buzzard Oct 17 '12 at 9:33
  • Makes sense. Cheers ! – techtrekker Oct 17 '12 at 9:53

The selectRadio needs To be bound to a variable in your controller. You then need to compare 'Detail'== value of this controller variable


You need to latch onto the JavaScript onChange event when a radio button is selected to fire off an actionFunction. You need to have a reRender in the actionFunction of the detail blocks, which is invoked when the onChange event occurs.

The rendered in your apex:detail will then be the comparison of a detail identifier with the value that has been set in the controller variable

<apex:selectRadio value="{!radioValue}" onChange="setVisible()" />

//needs to be within the apex:form
<apex:actionFunction name ="setVisible" value="{!doNothing}" reRender="Parent Id of detail block"/>

<apex:detail rendered="{!radioValue == 'Detail'"} />

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.