How to update multiple components (selectOneMenu) with depending objects relations?

Question

i have the following (self-explanatory) entity-relation:

* Manufacturer
* Car    (Manufacturer.getCars())
* Tire   (Car.getTires())

MyBean

private List<Manufacturer> allManufacturers

private Manufacturer selectedManufacturer
private Car selectedCar
private Tire selectedTire

xhtml

<p:selectOneMenu id="manufacturerSel" value="#{myBean.selectedManufacturer}" converter="#{manufacturerConverter}">
    <f:selectItem itemLabel="None" itemValue="#{null}" />
    <f:selectItems value="#{myBean.allManufacturers}" />
    <p:ajax update="carSel tireSel" />
</p:selectOneMenu>

<p:selectOneMenu id="carSel" value="#{myBean.selectedCar}" converter="#{carsConverter}" disabled="#{empty myBean.selectedManufacturer.cars}">
    <f:selectItem itemLabel="None" itemValue="#{null}" />
    <f:selectItems value="#{myBean.selectedManufacturer.cars}"  />
    <p:ajax update="tireSel" />
</p:selectOneMenu>

<p:selectOneMenu id="tireSel" value="#{myBean.selectedTire}" converter="#{tiresConverter}" disabled="#{empty myBean.selectedCar.tires}">
    <f:selectItem itemLabel="None" itemValue="#{null}" />                            
    <f:selectItems value="#{myBean.selectedCars.tires}"  />
</p:selectOneMenu>

• the last two p:selectOneMenu should be updated depending on the selection in the first one
• The last p:selectOneMenu with ID tireSel is not being updated correctly
• All the to-be-updated components are inside the same NamingContainer
• the carSel gets updated, but the values loaded in tireSel are strange (seem to be valid for the last request)
• i also tried update="@form" in manufacturerSel

EDIT To show which EL Version is used: Here´s an excerpt of my pom.xml

<dependency>
    <groupId>javax.faces</groupId>
    <artifactId>javax.faces-api</artifactId>
    <version>2.1</version>
</dependency>
<dependency>
    <groupId>org.glassfish</groupId>
    <artifactId>javax.faces</artifactId>
    <version>2.1.12</version>
</dependency>    
<dependency>
    <groupId>javax.el</groupId>
    <artifactId>el-api</artifactId>
    <version>2.2</version>
    <scope>provided</scope>
</dependency>

Solution 1

You basically need to clear out the selectedCar value. You can use <p:ajax listener> for this.

<p:ajax listener="#{myBean.clearSelectedCar}" update="carSel tireSel" />

with

public void clearSelectedCar() {
    selectedCar = null; // You might want to clear selectedTire as well.
}

Otherwise the old selected value will still retain in the bean and the list of tires will still depend on that.

Solution 2

Normally, the PrimeFaces command button update works on the whole form. But sometimes we don't want to update the whole form, maybe we want to update a div with one id or multiple divs with the same class. It works with Primefaces and Spring Boot.

If you want to update the whole form just change the update attribute-

update="@form"

If you want to update a div within an ID

update="@(#divId)"

If you want to update multiple div or a single div using the class name-

update="@(.className)"

If you want to update multiple div or a single div using the class name-

update="@(.className1, .className2)"