How to dynamically change panelGroup using selectOneListBox and AJAX - ajax

Question

I want to change the look of the menu based on the selected item.
how to get the value of selectonelistbox using managed bean?
Bean source:
public void selectOneMenuListener(ValueChangeEvent event) {
Object newValue = (String) event.getNewValue();
selectedMenu = newValue.toString();
}
public String getSelectedMenu() {
return selectedMenu;
}
public void setSelectedMenu(String selectedMenu) {
this.selectedMenu = selectedMenu;
}
Page:
<h:panelGroup id="panel">
<h:selectOneListbox id="katProduktu" valueChangeListener="#{produkt_KatBean.selectOneMenuListener}">
<f:selectItems value="#{produkt_KatBean.produkt_KatAllList}"
var="pk" itemLabel="#{pk.symbol}" itemValue="#{pk.id}"/>
<f:ajax render="produktMenu" event="change" execute="#this" />
</h:selectOneListbox>
</h:panelGroup>
<h:panelGroup layout="block" id="produktMenu">
<h:panelGroup rendered="#{produkt_KatBean.selectedMenu==1}">
Menu 1
</h:panelGroup>
<h:panelGroup rendered="#{produkt_KatBean.selectedMenu==2}">
Menu 2
</h:panelGroup>
<h:panelGroup rendered="#{produkt_KatBean.selectedMenu==3}">
Menu 3
</h:panelGroup>
<h:panelGroup rendered="#{produkt_KatBean.selectedMenu==4}">
Manu 4
</h:panelGroup>
</h:panelGroup>
Thanks!

Answer 1

Don't use valueChangeListener. It's the wrong tool for the job. Just bind the property to the value attribute of the menu component and let the rendered attribute intercept on that. This way you don't need a listener at all. Also your rendered comparisons won't work for strings. You should have used == '1' instead of == 1 and so on, but this is plain clumsy, just make it Long (or Integer).
<h:panelGroup id="panel">
<h:selectOneListbox id="katProduktu" value="#{produkt_KatBean.selectedMenu}">
<f:selectItems value="#{produkt_KatBean.produkt_KatAllList}"
var="pk" itemLabel="#{pk.symbol}" itemValue="#{pk.id}"/>
<f:ajax render="produktMenu" />
</h:selectOneListbox>
</h:panelGroup>
<h:panelGroup layout="block" id="produktMenu">
<h:panelGroup rendered="#{produkt_KatBean.selectedMenu==1}">
Menu 1
</h:panelGroup>
<h:panelGroup rendered="#{produkt_KatBean.selectedMenu==2}">
Menu 2
</h:panelGroup>
<h:panelGroup rendered="#{produkt_KatBean.selectedMenu==3}">
Menu 3
</h:panelGroup>
<h:panelGroup rendered="#{produkt_KatBean.selectedMenu==4}">
Manu 4
</h:panelGroup>
</h:panelGroup>
With just
private Long selectedMenu; // Or Integer? Should be the same type as #{pk.id}.
// +getter +setter
(note that I omitted the event and execute attributes of <f:ajax> as they represented the default values already)