JSF - Create a Dynamic Menu by using AJAX & selectOneListbox
10,841
You can use the ajax support built in to JSF 2 to achieve this. To do this nest an f:ajax tag in your h:selectOneListbox tag. The f:ajax tag should look like:
<f:ajax render="loadMenu" execute="@this" />
This should process the changed value in your list box, and re-render the panelGroup.
for further details, see: http://mkblog.exadel.com/2010/04/learning-jsf-2-ajax-in-jsf-using-fajax-tag/
Author by
markzzz
Updated on June 05, 2022Comments
-
markzzz almost 2 years
What I'd like to do is simple to explain :
bean
@ManagedBean @ViewScoped public class Articles { private String selectedMenu; @PostConstruct public void init() { if(selectedMenu==null || selectedMenu.trim().isEmpty()) { this.selectedMenu="0"; } } public String getSelectedMenu() { return selectedMenu; } public void setSelectedMenu(String selectedMenu) { this.selectedMenu = selectedMenu; } }
page
<h:selectOneListbox onchange="..?? ajax call that render on loadMenu and pass the value of the focused listbox to Articles Bean" id="category" size="0" > <f:selectItem itemLabel="first" itemValue="0" /> <f:selectItem itemLabel="second" itemValue="1" /> <f:selectItem itemLabel="third" itemValue="2" /> </h:selectOneListbox> <h:panelGroup layout="block" id="loadMenu"> <h:panelGroup rendered="#{articles.selectedMenu=='0'}"> MENU 0 </h:panelGroup> <h:panelGroup rendered="#{articles.selectedMenu=='1'}"> MENU 1 </h:panelGroup> <h:panelGroup rendered="#{articles.selectedMenu=='2'}"> MENU 2 </h:panelGroup> </h:panelGroup>
When I change the value of the listbox, the menu should change dinamically (by calling some function on the server). I think that the code above expresses what I'm looking for.
I must know how call it using the onchange option. Is it possible?
Cheers
UPDATE
<h:panelGroup layout="block"> <h:selectOneListbox styleClass="article_combo" size="0" id="selectedMenu" > <f:selectItem itemLabel="first" itemValue="0" /> <f:selectItem itemLabel="second" itemValue="1" /> <f:selectItem itemLabel="third" itemValue="2" /> <f:ajax event="change" execute="@this" render="loadMenu" /> </h:selectOneListbox> </h:panelGroup> <h:panelGroup layout="block" id="loadMenu"> <h:panelGroup rendered="#{articles.selectedMenu=='0'}"> MENU 0 </h:panelGroup> <h:panelGroup rendered="#{articles.selectedMenu=='1'}"> MENU 1 </h:panelGroup> <h:panelGroup rendered="#{articles.selectedMenu=='2'}"> MENU 2 </h:panelGroup> </h:panelGroup>