While using reRender, rendered object will not update without a page refresh - jsf

Question

I have a h:selectonemenu that is populated by a list. When a specific value is selected, a h:datatable should be rendered. When I select that "specific" value, the h:datatable does not render until I refresh the page. What am I doing wrong?
<tr class="portlet-table-body" >
<td width="20%" class="porlet-padding-left"><h:outputText value="${operatorProgramBundle.NextGenerationWorkflow}" /></td>
<td width="450px">
<h:selectOneMenu id="ngw" styleClass="portlet-dropdown" value="${CRUDOperatorProgram.selectedNextGenWorkflow}">
<f:selectItems value="${CRUDOperatorProgram.nextGenWorkflowList}" />
<a4j:support event="onchange" ajaxsingle = "true" reRender="customTable" ></a4j:support>
</h:selectOneMenu>
</td>
</tr>
<h:panelGroup id="customTable">
<h:dataTable id="DispatchConfigurationCustom" columnClasses="portlet-table-same portlet-table-cell"
headerClass="portlet-table-same portlet-table-cell" value="#{CRUDOperatorProgram.workflowConfigList}" var="workflowConfig" width="100%" rendered="#{CRUDOperatorProgram.selectedNextGenWorkflow == 0}">
<h:column>
<f:facet name="header">
<h:outputText value="Include" />
</f:facet>
<h:selectBooleanCheckbox id="includeInd" value="#{workflowConfig.isIncludedInd}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Automate" />
</f:facet>
<h:selectOneRadio id="onOff" value="#{workflowConfig.isAutomatedInd}">
<f:selectItem id="onButton" itemLabel="On" itemValue="0" />
<f:selectItem id="offButton" itemLabel="Off" itemValue="0" />
</h:selectOneRadio>
</h:column>
</h:dataTable>
</h:panelGroup>
Updated Code:
<tr class="portlet-table-body" >
<td width="20%" class="porlet-padding-left"><h:outputText value="${operatorProgramBundle.NextGenerationWorkflow}" /></td>
<td width="450px">
<h:selectOneMenu id="ngw" styleClass="portlet-dropdown" value="#{CRUDOperatorProgram.selectedNextGenWorkflow}" valueChangeListener="#{CRUDOperatorProgram.nextGenWorkflowChanged}">
<f:selectItems value="#{CRUDOperatorProgram.nextGenWorkflowList}" />
<a4j:support event="onchange" reRender="customTable"></a4j:support>
</h:selectOneMenu>
</td>
</tr>
<h:panelGroup id="customTable">
<h:dataTable id="DispatchConfigurationCustom" columnClasses="portlet-table-same portlet-table-cell"
headerClass="portlet-table-same portlet-table-cell" value="#{CRUDOperatorProgram.workflowConfigList}" var="workflowConfig" width="100%">
<h:column>
<f:facet name="header">
<h:outputText value="Include" />
</f:facet>
<h:selectBooleanCheckbox id="includeInd" value="#{workflowConfig.isIncludedInd}"/>
</h:column>
<h:column>
<f:facet name="header">
<h:outputText value="Automate" />
</f:facet>
<h:selectOneRadio id="onOff" value="#{workflowConfig.isAutomatedInd}">
<f:selectItem id="onButton" itemLabel="On" itemValue="0" />
<f:selectItem id="offButton" itemLabel="Off" itemValue="0" />
</h:selectOneRadio>
</h:column>
</h:dataTable>
</h:panelGroup>
Back Bean (Relevant parts) ...
private List<WorkflowConfig> workflowConfigList = new ArrayList<WorkflowConfig>();
private List<SelectItem> nextGenWorkflowList;
public void nextGenWorkflowChanged(ValueChangeEvent event) {
workflowConfigList.clear();
//the value is a long, so make it a string and check
if(event.getNewValue() != null && event.getNewValue().toString().equals("0")){
loadWorkFlowConfigs();
}else{
//Do not show the datatable
workflowConfigList.clear();
}
}
public List<WorkflowConfig> getWorkflowConfigList(){
return this.workflowConfigList;
}
private void loadWorkFlowConfigs() {
Query query = em.createNamedQuery("findAllWorkflowSteps");
List<WorkflowStep> step = (List<WorkflowStep>) query.getResultList();
for(WorkflowStep workflowStep : step){
WorkflowConfig workflowConfig = new WorkflowConfig();
workflowConfig.setWorkflowStep( workflowStep );
workflowConfigList.add(workflowConfig);
}
}
I implemented a valueChangeListener like you said. I tried this example (with the h:panelGroup) and the example without a h:panelGroup explained in the documentation. Each require a page refresh... Can you see anything I'm doing wrong?

Answer 1

Change the behavior of the <a4j:support> component by adding adding the action=#{someBean.someMethod} tag attribute or add a valueChangeListener in your <h:selectOneMenu>. IMO, I preffer to add a valueChangeListener. See the example in the official documentation.
As a side note, why you use ${...} instead of #{...}?