0

I have an <apex:selectList> whose onchange event rerenders an <apex:outputPanel> through an <apex:actionSupport>.

While I was busy celebrating the magic of Visualforce, I noticed that adding a set of <apex:inputField> within the same <apex:form> breaks the onchange/rerender binding.


The following markup (without the inputFields) works fine, when the selectList is changed, the value is displayed correctly:

<apex:page standardStylesheets="false" standardController="Opportunity" extensions="RP_MobileOppExtension">

    <link href="{!URLFOR($Resource.Bootstrap, 'bootstrap-3.3.4-dist/css/bootstrap.min.css')}" rel="stylesheet" />
    <apex:includeScript value="{!URLFOR($Resource.bootstrap, 'bootstrap-3.3.4-dist/js/bootstrap.min.js')}"/>

    <div class="container">
        <apex:pageMessages >
        </apex:pageMessages>
        <apex:form>
            <h3>Pricebooks</h3>
            <apex:selectList value="{!pricebookSelection}" size="1" >
                 <apex:selectOptions value="{!pricebookOptions}" />
                 <apex:actionSupport event="onchange" reRender="selection" action="{!dummy}"/>
            </apex:selectList>

            <h3>Selection</h3>
            <apex:outputPanel id="selection">
                {!pricebookSelection}
            </apex:outputPanel>
        </apex:form>
    </div>
</apex:page>

However, as soon as I add these five <apex:inputField>, the binding breaks and nothing happens if I change the selectList:

<apex:page standardStylesheets="false" standardController="Opportunity" extensions="RP_MobileOppExtension">

    <link href="{!URLFOR($Resource.Bootstrap, 'bootstrap-3.3.4-dist/css/bootstrap.min.css')}" rel="stylesheet" />
    <apex:includeScript value="{!URLFOR($Resource.bootstrap, 'bootstrap-3.3.4-dist/js/bootstrap.min.js')}"/>

    <div class="container">
        <apex:pageMessages >
        </apex:pageMessages>
        <apex:form >
            <apex:inputField value="{!Opportunity.Name}" label="Opp Name"/>
            <apex:inputField value="{!Opportunity.AccountId}" label="Account"/>
            <apex:inputField value="{!Opportunity.StageName}" label="Stage"/>
            <apex:inputField value="{!Opportunity.Probability}" label="Probability"/>
            <apex:inputField value="{!Opportunity.CloseDate}" label="CloseDate"/>

            <h3>Pricebooks</h3>
            <apex:selectList value="{!pricebookSelection}" size="1" >
                <apex:selectOptions value="{!pricebookOptions}" />
                <apex:actionSupport event="onchange" reRender="selection" action="{!dummy}"/>
            </apex:selectList>

            <h3>Selection</h3>
            <apex:outputPanel id="selection">
                {!pricebookSelection}
            </apex:outputPanel>
        </apex:form>
    </div>
</apex:page>


Is this expected behavior/why is this happening? I'm sure there's a simple explanation, but I'm extremely curious.

  • Instead of selection rerender complete form, you would get an error message. – Ashwani Aug 17 '15 at 15:30
2

I bet one of those are a required field which is causing an error. Since you have no ID on the pagemessages and you are not rerendering it then you cannot see the error.

Resolution:

  1. Add a ID to pagemessages
  2. Rerender the pagemessages
  3. Wrap select in an action region to process on the select on the onchange action (If you do not need the Inputs to be processed)

<link href="{!URLFOR($Resource.Bootstrap, 'bootstrap-3.3.4-dist/css/bootstrap.min.css')}" rel="stylesheet" />
<apex:includeScript value="{!URLFOR($Resource.bootstrap, 'bootstrap-3.3.4-dist/js/bootstrap.min.js')}"/>

<div class="container">
    <apex:pageMessages id="msgs">
    </apex:pageMessages>
    <apex:form >
        <apex:inputField value="{!Opportunity.Name}" label="Opp Name"/>
        <apex:inputField value="{!Opportunity.AccountId}" label="Account"/>
        <apex:inputField value="{!Opportunity.StageName}" label="Stage"/>
        <apex:inputField value="{!Opportunity.Probability}" label="Probability"/>
        <apex:inputField value="{!Opportunity.CloseDate}" label="CloseDate"/>

        <h3>Pricebooks</h3>
        <apex:actionRegion>
        <apex:selectList value="{!pricebookSelection}" size="1" >
            <apex:selectOptions value="{!pricebookOptions}" />
            <apex:actionSupport event="onchange" reRender="selection, msgs" action="{!dummy}"/>
        </apex:selectList>
        </apex:actionRegion>

        <h3>Selection</h3>
        <apex:outputPanel id="selection">
            {!pricebookSelection}
        </apex:outputPanel>
    </apex:form>
</div>

| improve this answer | |
  • You were exactly right, rerendering the pageMessages surfaced a bunch of errors. I added an actionRegion and it's working perfectly. Thanks for your help and time! – Brian Mansfield Aug 17 '15 at 20:41

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.