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.
selection
rerender complete form, you would get an error message.