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

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 #{...}?