[SalesForce] actionSupport reRender not working in the VF page

I want a picklist with 2 options, yes and no, if the user selects No, a new field should show up for the user to enter an Amount, if the user leaves it on Yes then nothing happens and they can click on "Save". When "No" is selected on the picklist field, nothing happens.

 <apex:pageBlock TITLE="Open an Account for this Company">
        <apex:outputText value="blah blah"/>

        <apex:pageBlockSection>

            <apex:selectList value="{!optionSelected}" multiSelect="false" size="1">
                <apex:selectOption itemValue="Yes" itemLabel="Yes"/>
                <apex:selectOption itemValue='No' itemLabel="No"/>
                <apex:actionSupport reRender="loadAmount" event="onChange" action="{!displayAmount}"/>
            </apex:selectList>

            <!--  What to Re-render and  When -->
            <apex:outputPanel id="loadAmount">
                <apex:pageBlockSectionItem rendered="{!optionSelected=='No'}">
                    <apex:outputPanel styleClass="requiredInput" layout="block">
                    <apex:outputPanel styleClass="requiredBlock"/>
                        <apex:inputText value="{!opportunityAmount}" required="true" styleClass="requiredInput" />
                    </apex:outputPanel>
                </apex:pageBlockSectionItem>
            </apex:outputPanel>

        </apex:pageBlockSection>
        <br/>

        <br/>
        <apex:commandButton id="saveBtn" value="Save" action="{!save}" />

    </apex:pageBlock>

The following section is supposed to show whenever a the selected option is "No" but it never shows up. What could the issue be and how would you re-write the code?

<apex:outputPanel id="loadAmount">
                    <apex:pageBlockSectionItem rendered="{!optionSelected=='No'}">
                        <apex:outputPanel styleClass="requiredInput" layout="block">
                        <apex:outputPanel styleClass="requiredBlock"/>
                            <apex:inputText value="{!opportunityAmount}" required="true" styleClass="requiredInput" />
                        </apex:outputPanel>
                    </apex:pageBlockSectionItem>
                </apex:outputPanel>

Best Answer

There are 2 issues in your code.

  1. event "onchange" is case sensitive (all will be in lower case). So, DO NOT use "onChange"

  1. If you are using actionSupport for rendering then <apex:inputText required="true"/> will create an issue in rendering

Wrong code

<apex:inputText value="{!opportunityAmount}" required="true" styleClass="requiredInput" />

Correct code

Remove required=true

 <apex:inputText value="{!opportunityAmount}" styleClass="requiredInput" />

Since required = true will expect the user input in the textfield when No is selected. Now, you try to select "Yes" it will not work. Because, property assignment is executed first and because of any blank value in required input, actionSupport will not fire properly.

Workaround

Try to validate Amount input mandatory in the controller save method.

Or, otherwise use actionFunction, rather than actionSupport.

Workable code

<apex:selectList value="{!optionSelected}" multiSelect="false" size="1">
        <apex:selectOption itemValue="Yes" itemLabel="Yes"/>
        <apex:selectOption itemValue="No" itemLabel="No"/>
        <apex:actionSupport reRender="loadAmount" event="onchange" action="{!displayAmount}"/>
    </apex:selectList>

    <!--  What to Re-render and  When -->
    <apex:outputPanel id="loadAmount">
        <apex:pageBlockSectionItem rendered="{!optionSelected=='No'}">
            <apex:outputPanel styleClass="requiredInput" layout="block">
            <apex:outputPanel styleClass="requiredBlock"/>
                <apex:inputText value="{!opportunityAmount}" styleClass="requiredInput" />
            </apex:outputPanel>
        </apex:pageBlockSectionItem>
    </apex:outputPanel>
Related Topic