Double p:selectOneMenu to feed one last p:selectOneMenu with p:ajax listener

Question

I have 3 <p:selectOneMenu>, two of them are here to feed the 3rd. But when I select in one combobox, the value disappears in the other one.

For doing this, I'm using 2 <p:ajax> components into the two first <p:selectonemenu>.

<p:panel columns="4" cellpadding="5" id="panelAddColor" header="#{msg['configuration_assignment_modif_panelheader']}" style="width: 500px;">
    <table>
        <tr>
            <td>
                <h:outputLabel for="comboBox_listBump" value="#{msg['bumper']}" />
            </td>
            <td>
                <p:selectOneMenu   id="comboBox_listBump" value="#{assignmentModificationController.idTypeBumper}" effect="fade" style="width: 100px;" styleClass="greyBackMenu" panelStyleClass="greyBackPanel">
                    <p:ajax event="change" listener="#{assignmentModificationController.comboboxBumpersChange()}" update="machine,comboBox_listBump,tint" />
                    <f:selectItem itemLabel="#{msg['menu_production_NewTech']}" itemValue="" />
                    <f:selectItems value="#{assignmentModificationController.listBumper}" var="b" itemLabel="#{b.name}" itemValue="#{b.id}"/>
                </p:selectOneMenu>
            </td>
            <td>
                <p:message for="comboBox_listBump" />
            </td>
        </tr>
        <tr>
            <td>
                <h:outputLabel for="tint" value="#{msg['configuration_safetystock_tint']}" />
            </td>
            <td>
                <p:selectOneMenu id="tint" value="#{assignmentModificationController.idTint}" effect="fade" styleClass="greyBackMenu" panelStyleClass="greyBackPanel">
                    <p:ajax event="change" listener="#{assignmentModificationController.comboboxBumpersChangeTint()}" update="machine,comboBox_listBump,tint" />
                    <f:selectItem itemLabel="#{msg['menu_production_NewTech']}" itemValue="" />
                    <f:selectItems value="#{assignmentModificationController.listTypeTint}" var="p" itemLabel="#{p.name}&#160;&#160;" itemValue="#{p.id}" />
                </p:selectOneMenu>
            </td>
        </tr>
        <tr>
            <td>
                <h:outputLabel for="machine" value="#{msg['menu_configuration_machines']}" />
            </td>
            <td>
                <p:selectOneMenu id="machine" value="#{assignmentModificationController.idMachine}" effect="fade" >
                    <f:selectItem itemLabel="#{msg['menu_production_NewTech']}" itemValue="" />
                    <f:selectItems value="#{assignmentModificationController.listMachines}" var="p" itemLabel="#{p.name}&#160;&#160;" itemValue="#{p.id}" />
                </p:selectOneMenu>
            </td>
            <td>
                <p:message for="machine" />
            </td>
        </tr>
    </table>

    <center>
        <p:commandButton value="Créer" update="growl,panelAddColor" validateClient="true" style="font-size: 13px;" action="#{assignmentModificationController.addTintAssignment}" />
        -
        <p:commandButton value="Quitter" style="font-size: 13px;" action="TO_config_menu" />
    </center>
</p:panel>

And my test in bean :

@PostConstruct
public void init() {
    setListBumper(TypeBumpHome.getAll());
    setListTint(TypeTintHome.getAll());
    setListMachines(MachineHome.getAll());

    List<TypeTint> allTypeTint = new ArrayList<TypeTint>();
    allTypeTint = TypeTintHome.getAll();

    for (TypeTint t : allTypeTint) {
        colorList.put(t.getId(), t.getName());
    }
    setListTypeTint(TypeTintHome.getAll());
}

public void comboboxBumpersChange() {
    System.out.println("BUMPER : " + getIdTypeBumper() + " " + getIdTint());
}

public void comboboxBumpersChangeTint() {
    System.out.println("TINT : " + getIdTypeBumper() + " " + getIdTint());
}

Which scope are you using for the bean? Is the second menu dependent from the first one too? — Aritz, Apr 20 '15 at 14:58
Hello ! @RequestScoped, no there is no dependancy between the 1st and the 2nd. But the 3rd is build with the 1st and the 2nd (dependancy). — Quentin T., Apr 21 '15 at 06:34
Being it `@RequestScoped` you're rebuilding the bean for each request (setting the default values when an ajax request happens). Try to go with `@ViewScoped`. — Aritz, Apr 21 '15 at 06:37
It works ! Thank you, I was thinking I ever try this with @SessionScoped ... You can post the answer. — Quentin T., Apr 21 '15 at 06:54

score 2 · Accepted Answer · edited May 23 '17 at 11:50

2

As per the comments, you're using a @RequestScoped bean. The ajax events cause a new request, so it's being rebuilt and consequently loosing its current state. The solution is to use the view scope and take advantage of the JSF' stateful nature.

See also

edited May 23 '17 at 11:50

Community

1
1

answered Apr 21 '15 at 07:14

Aritz

30,971
16
136
217

Double p:selectOneMenu to feed one last p:selectOneMenu with p:ajax listener

1 Answers1