Rerender on inputfield checkbox

Question

I want to display some fields if user checks the checkbox. I am trying using actionsupport but it does not see to work. Please provide some help on how to do that.

<apex:pageBlockSection id="Misc_Section">
<apex:pageBlockSectionItem id="PurchaseApprovalSectionItem" >
    <apex:outputLabel id="PurchaseApprovalLabel" value="I am attaching Purchasing’s approval of nonstandard terms."/>
    <apex:outputPanel id="PurchaseApprovalPanel">
        <!-- TODO Validation PE must select one of the 2 checkboxes-->
        <apex:inputField id="Is_purchasing_approval_attached" value="{!agreement.Is_purchasing_approval_attached__c}"/> 
        <!-- <apex:actionSupport id="MiscComponent3" event="onclick" reRender="MandatoryUploadSectionItem"/><br/>-->
        <apex:actionSupport event="onchange" rerender="Misc_Section"/>
    </apex:outputPanel>
</apex:pageBlockSectionItem>
<!-- TODO: Rendered if Purchasing approval of nonstd terms = true --> 
<apex:pageBlockSectionItem id="MandatoryUploadSectionItem" rendered="{!IF(agreement.Is_purchasing_approval_attached__c,True, False)}">
    <apex:outputLabel id="MandatoryUploadLabel" value="Purchasing approval mandatory document upload"/>
    <apex:outputPanel id="MandatoryUploadPanel">
        <!-- TODO mandatory supporting document upload -->
    </apex:outputPanel>
</apex:pageBlockSectionItem>
<apex:pageBlockSection>

Please tell me how can I achieve this? I want to rerender mandatoryUploadSectionItem when the checkbox is checked.

Thanks!

Answer 1

Wrap actionSupport inside apex:inputField or apex:inputcheckbox

Secondly, you should rerender the panel or pageBlockItem which is not getting rendered by some other conditions.

Check this sample code closely. Added an apex:outputPanel on top of apex:pageBlockSectionItem and apex:outputPanel has been rerendered from actionSupport.

Updated Code:

<apex:pageBlockSection id="Misc_Section">
    <apex:pageBlockSectionItem id="PurchaseApprovalSectionItem" >
        <apex:outputLabel id="PurchaseApprovalLabel" value="I am attaching Purchasing’s approval of nonstandard terms."/>
        <apex:outputPanel id="PurchaseApprovalPanel">
            <!-- TODO Validation PE must select one of the 2 checkboxes-->
            <apex:inputField id="Is_purchasing_approval_attached" value="{!agreement.Is_purchasing_approval_attached__c}"> 
                <apex:actionSupport id="MiscComponent3" event="onclick" reRender="displayValue,Misc_Section"/>
            </apex:inputField>
        </apex:outputPanel>
    </apex:pageBlockSectionItem>
    <!-- TODO: Rendered if Purchasing approval of nonstd terms = true --> 
    <apex:outputPanel id="displayValue">
        <apex:pageBlockSectionItem id="MandatoryUploadSectionItem" rendered="{!IF(agreement.Is_purchasing_approval_attached__c,True, False)}">
            <apex:outputLabel id="MandatoryUploadLabel" value="Purchasing approval mandatory document upload"/>
            <apex:outputPanel id="MandatoryUploadPanel">
                <!-- TODO mandatory supporting document upload -->
            </apex:outputPanel>
        </apex:pageBlockSectionItem>
    </apex:outputPanel>
<apex:pageBlockSection>