0

I have two apex:selectList in my page -

<apex:outputPanel id="DocumentPageBlock">
    <apex:form>
        <apex:pageBlock title="Add Documents" mode="edit">
            <apex:pageBlockSection title="Information" columns="2">
                <apex:inputField value="{!savedDocument.Name}" />
                
                <apex:selectList id="firstDropdownValues" multiselect="false" size="1" value="{!firstSelectedValue}" label="First Dropdown Values">
                        <apex:selectOptions value="{!firstSelectedValueOptions}" />
                        <apex:actionSupport event="onchange" action="{!onFirstDropdownValueChange}" />
                </apex:selectList>

                <apex:selectList id="secondDropdownValues" multiselect="false" size="1" value="{!secondSelectedValue}" label="Second Dropdown Values">
                        <apex:selectOptions value="{!secondSelectedValueOptions}" />
                </apex:selectList>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:outputPanel>

Both the dropdowns have some values in the dropdown. I have a requirement to change the selected value in dropdown with id 'secondDropdownValues' based on the selection in dropdown with id 'firstDropdownValues'. In my controller classs I have map which stores mapping between Ids of first dropdown and corresponding select option in second dropdown -

Map<Id, List<SelectOption>> firstToSecondDropdownValuesMap;

This map is correctly populated and has all the required values. The method that I currently have to set the values in the second dropdown, which is not working -

public void onFirstDropdownValueChange() {
    secondSelectedValue = (firstToSecondDropdownValuesMap.get(firstSelectedValue))[0].getValue();   
}

What am I doing wrong here ? Please note that I do not want to change the values in dropdown, I just want the selection to change.

Edit 1 - As suggested by @jagmohan, code was missing reRender="secondDropdownValue". But I am observing one more problem. After adding it the event works properly only if I don't have any other apex:inputField. If I have any other fields along with the dropdowns (updated the code with it), and if I set required="true" for that field then again the event stops firing. What could be the reason and solution for that ?

5
  • 1
    Did you try setting reRender="secondDropdownValues" on the apex:actionSupport? I think if you do that, it should update the second dropdown after the action completes.
    – jagmohan
    Aug 2, 2022 at 5:06
  • @jagmohan, Thank you, the values are getting selected now after setting reRender="secondDropdownValues". But I am observing one more problem. If I have any other fields along with the dropdowns, and if I set required="true" for those fields then again the event stops firing. What could be the reason for that ? Aug 2, 2022 at 5:40
  • 1
    Check out my answer, if that helps please accept and upvote. Thanks.
    – jagmohan
    Aug 3, 2022 at 6:13
  • @jagmohan Thanks a lot. The apex:actionRegion is allowing the events to fire properly now. Just that the page alignment is a little distorted now and I am not able to see the labels on the dropdowns. Aug 3, 2022 at 6:46
  • please use apex:pageBlockSectionItem inside apex:pageBlockSection to format field label and input element.
    – jagmohan
    Aug 3, 2022 at 7:36

1 Answer 1

1

To overcome the issue where it stops working when adding more required fields to the form, you need to use apex:actionRegion and wrap the two select lists along with the apex:actionSupport in it. The main use of apex:actionRegion is to limit the number of fields which get processed by the server for AJAX request fired by the apex:actionSupport. So when we wrap the fields in it, we are basically limiting the number of fields to be sent to the server to be just the two select lists.

Try making changes to your code as per the below snippet and let me know it goes

<apex:outputPanel id="DocumentPageBlock">
    <apex:form>
        <apex:pageBlock title="Add Documents" mode="edit">
            <apex:pageBlockSection title="Information" columns="2">
                <apex:inputField value="{!savedDocument.Name}" />
                <!-- wrap the select lists in action region -->
                <apex:actionRegion>
                    <apex:selectList id="firstDropdownValues" multiselect="false" size="1" value="{!firstSelectedValue}" label="First Dropdown Values">
                        <apex:selectOptions value="{!firstSelectedValueOptions}" />
                        <apex:actionSupport event="onchange" action="{!onFirstDropdownValueChange}" reRender="secondDropdownValues" />
                    </apex:selectList>

                    <apex:selectList id="secondDropdownValues" multiselect="false" size="1" value="{!secondSelectedValue}" label="Second Dropdown Values">
                        <apex:selectOptions value="{!secondSelectedValueOptions}" />
                    </apex:selectList>
                </apex:actionRegion>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:outputPanel>

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .