How to load a Selectonemenu based on Select Previous using JSF?

Question

I am trying to register a Neighborhood based in the City and the selected state.

The list of the city depends on the state selected.

Follows my code:

            <div class="form-group">
                <h:selectOneMenu id="selectCidade" class="form-control mr-3" value="#{bairroBean.cidade}" rendered="true" >
                    <f:selectItem itemValue="" itemLabel="Cidade" />
                    <f:selectItems value="#{bairroBean.cidades}" var="c" itemLabel="#{c.nome}" itemValue="#{c.id}" />
                </h:selectOneMenu>
            </div>
            <div class="form-group">
                <h:outputLabel for="nome" value="Nome" />
                <h:inputText type="text" class="form-control"
                    placeholder="Digite o nome da cidade"
                    value="#{cidadeBean.cidade.nome}" />
            </div>

I don’t know how to do this using JSF.

Answer 1

To solve this problem, we needed to define a Class that implements the Faces Framework Converter.

@FacesConverter(forClass = Estado.class)
public class EstadoConverter implements Converter {

    @Override
    public Object getAsObject(FacesContext context, UIComponent component, String value) {
        if (value == null) {
            return null;
        }
        Long id = Long.valueOf(value);
        Estado estado = new Estado();
        estado.setId(id);
        return estado;
    }

    @Override
    public String getAsString(FacesContext context, UIComponent component, Object value) {
        if (value == null) {
            return null;
        }

        Estado estado = (Estado) value;
        if (estado.getId() == null) {
            return null;
        }

        return estado.getId().toString();
    }

}

The previous answer is also related to this answer. But, Ajax was not working for lack of this class.

Answer 2

You must create a function onChange in the state select and within it change the list cidades, updating with the cities of the state.

For example:

public void onChangeEstado() {
    this.cidades = (List<Cidade>) carregarCidadesPorEstado(this.estadoSelecionado);
}

In the state select you should add the following lines:

<p:ajax
    update="selectCidade"
    event="change" process="selectEstado"
    listener="#{bairroBean.onChangeEstado}" />

This should update the city as you select state.