3

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>
Improve this question
  • I'm not seeing anything obviously wrong with your visualforce. It might help if you were to edit your question to include the displayAmount() method from your controller/extension. – Derek F Apr 13 '17 at 15:19
  • Another way to test to see if displayAmount() is your culprit is to remove it from the action attribute of your <apex:actionSupport> (so you'd just have action=""). If you do that, and the re-render starts working, then your issue is with displayAmount(). – Derek F Apr 13 '17 at 15:19
  • Try to put id="loadAmount" in the outer <apex:pageBlockSection> or even in the <apex:pageBlock>. As far as I remember Visualforce rerender doesn't recoginse well rerendering of sibilings in DOM, it works beter when inner DOM element is trying to rerender parent DOM element. – Maciek Simm Apr 13 '17 at 15:25
  • I tried moving id="loadAmount" to the outer apex:BlockSection and also to pageBlock, still, nothing happened. I also tried removing the displayAmount() from the action and leavint it as action="" and I got this error message: "Formula expression is required for attribute action in <apex:actionSupport> in InitiateCscApplication at line 16 column 91" – The Ghost Apr 13 '17 at 15:46
5

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>
Improve this answer
  • The whole problem was onChange, after I changed to lower case it started working. I also changed required=True on the field. Thanks @Santanu! – The Ghost Apr 13 '17 at 15:59
  • required = true will not work. As a test, after displaying this field, try to select "Yes" option again, you couldn't able to make this field disappear when "Yes" is selected. – Santanu Boral Apr 13 '17 at 16:05
  • Correct, It doesn't say required=True anymore and it is working just fine. Thanks again. – The Ghost Apr 13 '17 at 16:16
-2

Try wrapping your action support in an action region:

<apex:actionRegion>
<apex:actionSupport reRender="loadAmount" event="onChange" action="{!displayAmount}"/>
</apex:actionRegion>

This way you're using default Salesforce functionality and not relying on custom CSS code that could break in a future release or class with a future release's styling (e.g. Lightning).

Improve this answer
  • Um...why was this down-voted twice? What's wrong with this solution? It works perfectly to solve the question provided (I've tested and validated this). – Paugh Jan 8 '18 at 15:37

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.