嵌套的SelectOneMenu JSF 2.1

Question

I am developing a web application using JSf2.1. I am following tutorials to code a selectOneMenu (drop down list box).

I need to have 2 dropdown boxes(A ad B) but essentially call the same ajax listener function which would do some computation with the choice A and B...

So, can we have nested selectOneMenu like this?

<h:form id= "ourForm">
    <h:selectOneMenu value= "#{bean.valA}"...>
       <f:selectItems ... />
        <h:selectOneMenu value= "#{bean.valB}"...>
             <f:selectItems ... />
             <f:ajax listener="#{bean.listener}" render="ourForm"/>
        </h:selectOneMenu>
    </h:selectOneMenu>
</h:form>

And the bean listener method:

public void Listener{

//use valA and valB


}

Well, I tried doing the above but the page shows me a warning:

the form component needs to have a UIForm in its ancestry.Suggestion enclose the necessary withing

I tried without the nesting by calling the same listener on each selectOneMenu but I get same random behaviour..ie: when I choose elem 1 of A retaining the "prev" choice on B, box B randomly updates its choice to default and vice versa!

Please advise.

Answer 1

This is invalid syntax. You need to understand that JSF generates HTML code. A <h:selectOneMenu> generates a <select><option/></select> . A nested <h:selectOneMenu> as in your attempt would generate <select><option/><select><option/></select></select> which is completely invalid HTML (and thus inherently also completely invalid JSF).

You're not terribly clear on the concrete functional requirement, but I understand that you want to show a child menu only on certain selection of a parent menu? In that case, use the rendered attribute and refer it in <f:ajax render> .

Here's a rough kickoff example, which can if necessary be more simplified (eg without the need for renderMenuB property, depending on the concrete functional requirement which you didn't tell anything about).

<h:selectOneMenu value="#{bean.selectedValueA}">
    <f:selectItems value="#{bean.availableValuesA}" />
    <f:ajax listener="#{bean.handleChangeA}" render="menuB" />
</h:selectOneMenu>
<h:panelGroup id="menuB">
    <h:selectOneMenu value="#{bean.selectedValueB}" rendered="#{bean.renderMenuB}">
        <f:selectItems value="#{bean.availableValuesB}" />
        <f:ajax listener="#{bean.handleChangeB}" render="ourForm" />
    </h:selectOneMenu>
</h:panelGroup>

See also:

• Our selectOneMenu wiki page