First a quick explanation of the page: two dropdown lists, one for selecting a "start year", one for an "end year". Next to the dropdowns I display the years that are "between" the start and end year (if any). So if you have 1998 as start year and 2001 as end year, it would display [1999, 2000] as "evolution years".
This on its own works fine. However when I add some other code below for further functionality on the page, it stops working. I added some souts to the setters called by the dropdowns for testing, and it behaves as follows:
-I choose a year from either list -> it souts "calling setter" -> value is NOT actually set -> I choose another year -> NO sout anymore, no matter how many times I try on either list
So my conclusion is that after calling the setter to change the value in the backend for the first time, it sort of "hangs" there and nothing happens anymore. There are NO errors in the console.
Here's my code:
<div class="container" style="text-align: center">
<!-- start of code that works fine on its own, but doesn't when adding code below -->
<h:form id="mainForm" prependId="false">
<h2>
<b>#{msg['label.startSituation']}</b>
</h2>
<div class="ui-g">
<div class="ui-g-4">
<b>#{msg['label.startYear']}</b>
<br/>
<h:outputText value="#{criteriaBean.selectedStartYear}"></h:outputText><br/>
<p:selectOneMenu id="startYearId" styleClass="form-control"
value="#{criteriaBean.selectedStartYear}"
disabled="#{criteriaBean.yearsDisabled}">
<f:selectItem itemLabel="---" value="#{NULL}"/>
<f:selectItems itemLabel="#{applicationBean.availableYears}"
value="#{applicationBean.availableYears}"/>
<f:ajax render="@form"/>
</p:selectOneMenu>
</div>
<div class="ui-g-4">
<b>#{msg['label.endYear']}</b>
<br/>
<h:outputText value="#{criteriaBean.selectedEndYear}"></h:outputText><br/>
<p:selectOneMenu id="endYearId" styleClass="form-control"
value="#{criteriaBean.selectedEndYear}"
disabled="#{criteriaBean.yearsDisabled}">
<f:selectItem itemLabel="---" value="#{NULL}"/>
<f:selectItems itemLabel="#{applicationBean.availableYears}"
value="#{applicationBean.availableYears}"/>
<f:ajax render="@form"/>
</p:selectOneMenu>
</div>
<div class="ui-g-4">
<b>#{msg['label.intYears']}</b>
<br/>
<h:outputText value="#{criteriaBean.evolutionYears}"/>
</div>
</div>
<br/><br/>
<div class="ui-g">
<div class="ui-g-4"/>
<div class="ui-g-4">
<h:commandButton class="btn-primary"
rendered="#{!criteriaBean.yearsDisabled}"
value="#{msg['action.enterSelection']}"
action="#{navigationController.enterSelection}"/>
<h:commandButton class="btn-primary"
rendered="#{criteriaBean.yearsDisabled}"
value="#{msg['action.restart']}"
action="#{navigationController.restart}"/>
</div>
<div class="ui-g-4"/>
</div>
<hr/>
<!-- end of "fine code" -->
<!-- start of "problematic code" -->
<h:panelGroup id="criteriaPanelGroup" rendered="#{criteriaBean.yearsDisabled}">
<p:panel id="criteriaPanel" toggleable="true"
header="#{msg['common.criteria']}">
<p:tabView id="tabView">
<p:tab id="startYearTab" title="#{criteriaBean.selectedStartYear}">
<f:subview id="startYear">
<ui:include src="/include/yearPanel.xhtml">
<ui:param name="year" value="#{criteriaBean.selectedStartYear}"/>
<ui:param name="showSex" value="#{true}"/>
</ui:include>
</f:subview>
</p:tab>
<p:tab id="endYearTab" title="#{criteriaBean.selectedEndYear}">
<f:subview id="endYear">
<ui:include src="/include/yearPanel.xhtml">
<ui:param name="year" value="#{criteriaBean.selectedEndYear}"/>
</ui:include>
</f:subview>
</p:tab>
<ui:repeat value="#{criteriaBean.evolutionYears}" var="year">
<p:tab id="#{year}Tab" title="#{year}">
<f:subview id="evolutionYear">
<ui:include src="/include/yearPanel.xhtml">
<ui:param name="year" value="#{year}"/>
</ui:include>
</f:subview>
</p:tab>
</ui:repeat>
</p:tabView>
</p:panel>
<br/>
<div class="ui-g">
<div class="ui-g-4">
<h:commandButton id="searchButton" class="btn-primary"
value="#{msg['action.search']}"
action="#{criteriaController.search}" icon="ui-icon-search"
update="growl" onclick="PF('waitScreen').show();"
onerror="PF('waitScreen').close();"
oncomplete="PF('waitScreen').hide();"/>
</div>
</div>
<p:dialog header="#{msg['action.search.inProgress']}"
widgetVar="waitScreen" minHeight="40" closable="false"
resizable="false">
<div id="loading-div" class="ui-corner-all">
<br/>
<center>
<img style="height: 80px; margin: 30px;"
src="resources/images/loading3.gif" alt="#{msg['action.search.inProgress']}"/>
<h2 style="font-weight: normal;">#{msg['action.search.inProgress']}</h2>
</center>
</div>
</p:dialog>
</h:panelGroup>
<!-- end of "problematic code" -->
</h:form>
</div>
