JSF - Populating a drop down depending on value in other drop down

Question

Hi guys,

I need to populate a drop down based on the selected value in another drop down. I can use AJAX requests to do that but I am searching for a solution using JSF only. The values to populate the drop down need to come from a table every time user changes his selection.

Thanks

Answer 1

The idea is clear, but that is however quite a work if you insist in using ajaxless JSF only. You need to take a lot of things of the JSF lifecycle into account to get it to work flawlessly. It is after all also not very good for user experience; submitting the entire form on every change may take some time and the whole page needs to be reloaded again. Although, I've ever written a blog article how to get that to work, you may find it useful: populate child menu's.

At the time of Web 2.0 I would really reconsider doing this with help of ajax. By coincidence I have also had the idea to write a new blog about that sooner or later, based on the new ajaxical powers of JSF 2.0.

Answer 2

You didn't specify the version, so I'll assume JSF 1.2. The <a4j:support> tag is part of RichFaces:

<h:selectOneMenu id="firstDropDown" value="#{bean.firstDropDownSelection}">
   <f:selectItems value="#{bean.items}" />
   <a4j:support event="onchange" reRender="secondDropDown" 
       immediate="true" action="#{bean.fetchItems2}" />
</h:selectOneMenu>

<h:selectOneMenu id="secondDropDown" value="#{bean.secondDropDownSelection}">
   <f:selectItems value="#{bean.items2}" />
</h:selectOneMenu>

And in the method bean.fetchItems2 you load your collection items2 with the appropriate items.

What happens, is when the value of the first drop down changes, the second drop down is rerendered and its value is fetched from the server again.