I need to toggle the display between two panels on the web page. Initially first panel with p:commandButton "First" will be displayed. Click on First button will send ajax request and display second panel with p:commandButton "Second". Click on "Second" button display "first panel. But, second panel viewstate is not updated, so p:commandButton "Second" can not fire an event.
<h:form id="firstForm" >
<h:panelGroup id="filterPanel" rendered="#{not filter.accepted}" >
<div id="menu">
<p:commandButton value="First" action="#{filter.action1}" update=":firstForm" >
</p:commandButton>
</div>
</h:panelGroup>
<h:panelGroup id="reportPanel" rendered="#{filter.accepted}" >
<div id="menu2">
<p:commandButton value="Second" action="#{filter.action2}" update=":firstForm">
</p:commandButton>
</div>
</h:panelGroup>
</h:form>
Bean code:
private boolean accepted;
public void action1(){
System.out.println("Filter Button");
accepted = true;
}
public void action2(){
System.out.println("Report Button");
accepted = false;
}
public boolean isAccepted() {
System.out.println(accepted);
return accepted;
}
First panel p:commandButton "First" calls action1 and prints "Filter Button". Second panel p:commandButton "Second" won't call action2 function, since its viewstate is not available. Is there any solution.
I went through the similar page, it did not work for me either JSF2: Form ajax action makes another form's view state to be lost
Thanks
KDB