How to fill a dropdown dependent on the values of another dropdown in a datatable?

Question

I have a <t:dataTable> with two <h:selectOneMenu> dropdowns in two columns. The second dropdown is populated depending on the value of the first dropdown.

<t:dataTable value="#{tablaConfigBean.tablaConfigList}" var="item">
    <t:column>
        <h:selectOneMenu value="#{item.tabla}">
            <f:selectItem itemLabel="SIN CORRESPONDENCIA" itemValue="SIN CORRESPONDENCIA"/> 
            <f:selectItems value="#{tablaConfigBean.tablasList}" var="tabla" itemLabel="#{tabla}"  itemValue="#{tabla}"/>
            <f:ajax listener="#{tablaConfigBean.rellenaCampos}" render="seleccionCampoCorrespondido"/>
        </h:selectOneMenu>
    </t:column>
    <t:column>
        <h:selectOneMenu id="seleccionCampoCorrespondido" value="#{item.columnaCorr}">
            <f:selectItems id="listaCampoCorrespondido" value="#{tablaConfigBean.camposList}" var="campo" itemValue="#{campo}"/>
        </h:selectOneMenu>
    </t:column>
</t:dataTable>

Bean:

public void rellenaCampos (AjaxBehaviorEvent event) throws Exception {
    dataTable = (HtmlDataTable) event.getComponent().getParent().getParent();
    fila = (cCNtablaConfig) dataTable.getRowData();
    tablaParaCampos = fila.getTabla();      
    camposList = cDAOtablaConfig.rellenaCamposTabla(idSistema, sistema.desEsquema, tablaParaCampos, 3);
}

Although the first dropdown dosen't have any value, its <f:selectItems> is always loaded by default. If I choose one of those values, then the <f:selectItems> of the second dropdown populates. The problem appears when the both <h:selectOneMenu>s have to show a value preinitialized from the database. As I have written it, the second dropdown is not loaded with the corresponding value unless I choose manually the value on the first dropdown. Then, the expected value appears.

I have tried something like this: Execute managebean method from javascript onload event, but I'm not able to make it work. How can I do this?

Answer 1

Your concrete problem is caused because the list of the 2nd dropdown in the last column is been bound to one and same bean property and in no way dependent of the current row.

In this construct, your best bet would be passing the currently selected value of the 1st dropdown to the <f:selectItems> of the 2nd dropdown.

<t:dataTable value="#{tablaConfigBean.tablaConfigList}" var="item">
    <t:column>
        <h:selectOneMenu value="#{item.tabla}">
            <f:selectItem itemLabel="SIN CORRESPONDENCIA" itemValue="SIN CORRESPONDENCIA"/> 
            <f:selectItems value="#{tablaConfigBean.tablasList}" var="tabla" itemLabel="#{tabla}"  itemValue="#{tabla}"/>
            <f:ajax render="seleccionCampoCorrespondido"/>
        </h:selectOneMenu>
    </t:column>
    <t:column>
        <h:selectOneMenu id="seleccionCampoCorrespondido" value="#{item.columnaCorr}">
            <f:selectItems id="listaCampoCorrespondido" value="#{tablaConfigBean.getCamposList(item.tabla)}" var="campo" itemValue="#{campo}"/>
        </h:selectOneMenu>
    </t:column>
</t:dataTable>

(I removed the <f:ajax listener> from the 1st dropdown and I changed the <f:selectItems value> of the 2nd dropdown)

And move the original ajax listener method's job to the getter behind <f:selectItems>.

private Map<Tabla, List<Campo>> tablaCampos = new HashMap<Tabla, List<Campo>>();

public List<Campo> getCamposList(Tabla tablaParaCampos) {
    List<Campo> campos = tableCampos.get(tablaParaCampos);

    if (campos == null) {
        campos = cDAOtablaConfig.rellenaCamposTabla(idSistema, sistema.desEsquema, tablaParaCampos, 3);
        tableCampos.put(table, campos);
    }

    return campos;
}

Note that lazy loading + cache is implemented here. Also note that you should make sure that the equals() and hashCode() of Tabla class are properly implemented.