SelectOneMenu updates other SelectOneMenu [duplicate]

Question

I want to update the second SelectOneMenu when I select any item of the first SelectOnMenu. As it is now, I get the values for the SelectOneMenus from a ManagedBean. I guess I've to use AJAX (jquery) to send parameters to the ManagedBean.

<h:form>
    <div class="center">
        <h:panelGrid id="editTable" columns="2" styleClass="center">
            ...
            <h:outputText value="#{msg.timetable_list_category}" />
            <h:selectOneMenu class="category">
                <f:selectItems value="#{categoryBackingBean.categorys}" var="c"
                    itemLabel="#{c.category_Name}" itemValue="#{c.id}" />
            </h:selectOneMenu>

                <h:outputText value="#{msg.timetable_list_seminarblock}" />
            <h:selectOneMenu class="seminarblock">
                <f:selectItems value="#{seminarblockBackingBean.seminarblocks}" var="s"
                    itemLabel="#{s.seminarblock_Name}" itemValue="#{s.seminarblock_Id}" />
            </h:selectOneMenu>
            ...
        </h:panelGrid>
        ...
    </div>
</h:form>

Logical

Answer 1

Actually you can use a ValueChangeListener that is invoked when the value of your selectOneMenu changes:

<h:selectOneMenu class="category" valueChangeListener="#{yourBean.selectOneMenuListener}">
    <f:selectItems value="#{categoryBackingBean.categorys}" var="c"
        itemLabel="#{c.category_Name}" itemValue="#{c.id}" />
</h:selectOneMenu>

Then, in your bean you have this method:

public void selectOneMenuListener(ValueChangeEvent event) {
    //This will return you the newly selected
    //value as an object. You'll have to cast it.
    Object newValue = event.getNewValue(); 
    //The rest of your processing logic goes here...
}

To update the page you can either add onchange="submit()" to your <h:selectOneMenu/>. For some partial rendering you can try adding this <f:ajax/> instead of onchange="submit()":

<h:selectOneMenu class="category" valueChangeListener="#{yourBean.selectOneMenuListener}">
    <f:selectItems value="#{categoryBackingBean.categorys}" var="c"
        itemLabel="#{c.category_Name}" itemValue="#{c.id}" />
    <f:ajax event="change" execute="@form" render="theIdOfTheComponentYouWantToReRender"/>
</h:selectOneMenu>

If I'm not mistaken you'll want to get the id of the element selected in the first menu and populate the second one according to it. Then you can render the other selectOneMenu or, if needed, a panel wrapping a part of your form.

Maillot

Is there a possibility to send the parameter without a changeListener? – Logical

Can you, please, elaborate your context a little further then? What are you trying to achieve and/or which restrictions do you have? – Maillot

With your solution it works fine now, but there is a little bug in it. When you open this site for the first time, there are no values in the 2nd SelectOneMenu, because the valueChangedEvent gets only called, if you change the selected item the first time. – Logical

Are you initializing both of your backing lists? If you're not doing so the second list won't have elements, waiting for the first one to define which ones should go there. You should define a default value for the first menu and populate the second according to it when the page loads. – Maillot

The problem is, that there is a database in the background. If I set the ID to a default value and someone changes the database, the programm won't work anymore and there are no items in the 2nd SelectOneMenu again. The categories (1st SelectOneMenu) are shown perfectly, but I've to >change< the value of the 1st SelectOneMenu to get values for the 2nd. Info: 1 Category has more Seminarblocks – Logical

EDIT: Thx I've solved the problem. When I get the Categories form the database I take the first item and set it to the default id from the 2nd SelectOneMenu. – Logical

@user1586660 Sorry for the delay, but I'm glad yu got to solve it :). What you did is exactly what I was talking about (Maybe I did not make myself clear from the start and I apologize for that). – Maillot

Answer 2

Primefaces has a great feature of what you trying to achieve. It already using Ajax, so don't have to worry about writing code your self.

Hayrick

Can I use <f:ajax> insteaf primefaces? How can I send parameters to the bean? – Logical