<apex:actionSupport> event not firing in <apex:selectRadio> group

Question

I have the below in my VF page.

There is an <apex:selectRadio> group with the options populated by a function in my controller, and below there is an <apex:outputPanel> which is rendered when the user chooses the value Other in the radio group.

<table border="" class="WizardTable" align="left" 
    style="width:35%; border-collapse: separate; border-spacing: 1 1em;" >        
    <tr>
        <td>
            <div  class="MainPanelFont">
                Please select the format<br/> for the data request:
            </div>
        </td>
    </tr>
    <tr>
        <td valign="top" style="text-align:top; width:60%; padding-right: 3px; padding-left: 2px;" colspan="2">
            <div class="Mandatory">
                <apex:selectRadio styleClass="radioOpt" layout="pageDirection"
                    value="{!sObjectRFC.Mailshot_delivery_format__c}" 
                    id="outDR_delivery_format__c">
                    <apex:selectOptions value="{!MailshotFormatOptions}"/>    
                    <apex:actionSupport event="onchange" rerender="otherDRDeliveryFormatPanel" status="vfStatus"/>
                </apex:selectRadio> 
            </div>
        </td>                                                        
    </tr>
    <apex:outputPanel id="otherDRDeliveryFormatPanel" rendered="{!sObjectRFC.Mailshot_delivery_format__c=='Other'}">
    <!--apex:variable value="a" var="a"
                   rendered="{!sObjectRFC.Mailshot_delivery_format__c=='Other'}"-->
        <tr> <!-- Other_data_delivery_format__c -->
            <td style="text-align:top; width:60%; padding-right: 3px; padding-left: 2px;" colspan="2"
                title="{!$ObjectType.Request_for_System_Change__c.fields.Other_data_delivery_format__c.inlineHelpText}">
                <span class="MainPanelFont">
                    <apex:outputLabel 
                        value="{!$ObjectType.Request_for_System_Change__c.fields.Other_data_delivery_format__c.Label}"/>
                </span>
            </td>                                                           
        </tr>
        <tr> <!-- Other_data_delivery_format__c -->
            <td style="text-align:top; width:60%; padding-right: 3px; padding-left: 2px;" colspan="2"
                title="{!$ObjectType.Request_for_System_Change__c.fields.Other_data_delivery_format__c.inlineHelpText}">
                <apex:inputTextArea styleclass="MainPanelFont"                          
                    value="{!$ObjectType.Request_for_System_Change__c.fields.Other_data_delivery_format__c.Label}"/>                                                                
            </td>                                                           
        </tr>                                                       
    </apex:outputPanel>
</table>

The problem is that when the user chooses Other in the radio options, the event onchange should fire, rerender the outputPanel otherDRDeliveryFormatPanel and show the inputTextArea to allow the user to enter details.

But the event must not be firing as when I choose Other in the radio options, nothing happens...

Where am I going wrong?

Answer 1

The problem in your code is that the outputPanel is never rendered by default. That is it ID is not accessible by the actionSupport. To solve this you will need a "wrapper" outputPanel and rerender it.

<apex:outputPanel id="otherDRDeliveryFormatPanel" layout="none">
    <apex:outputPanel rendered="{!sObjectRFC.Mailshot_delivery_format__c=='Other'}">
    ...