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.

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

1 Answer 1

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>

1
  • 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! Aug 17, 2015 at 20:41

You must log in to answer this question.

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