How to show / hide jsf components

Question

In one of my JSF applications, I have a header part at the top containing selectOneMenu, and a part of the content at the bottom that displays, for example, filter components. By default, the application first displays selectOneMenu data at the top and the corresponding filter information at the bottom. If the user selects different selectOneMenu data, the corresponding filter information should be loaded on the bottom of the content.

The filter component has a CommandButton and the user fills in the filter information. When you click on the button and approve the filter, the application should load another component - Report.xhtml instead of the Filter component. That is, the Filter component should be replaced by Report on bottom content part.

Click the selectOneMenu element to repeat this process. This is a screen filter screen, etc.

Problem area 1. It is not possible to display the filter form and hide the report form on parts of the content 2. Backing up the filter bean - commandButton OK should return a value. Depending on the result, the Report should be displayed instead of a filter.

I am not sure if the design is accurate, if it does not work properly, please suggest and your valuable answers will be appreciated. I would like to save an ajax based application, and I don't want to reload the whole page on the button event.

GDK

---

<h:form id="form1"> <h:selectOneMenu value="#{states.stateName}"> <f:selectItems value="#{states.stateChoices}"/> <f:ajax render=":Filter"/> </h:selectOneMenu> </h:form> <h:form id="Filter"> <div id="content"> <h:panelGroup id="one" rendered="Need a condition from form1 to display this"> #{states.stateName} <br/>Report <h:inputText id="report" value="#{Counties.report}" style="width:150px"/> <h:commandButton id="OK" value="OK" actionListener="#{Counties.getReports}"> <f:param name="CatName" value="Dekalb" /> </h:commandButton> </h:panelGroup> </div> </h:form> <h:form id="Report"> <div id="content"> <h:panelGroup id="two" rendered="#{should be rendered on acceptance from OK command button}"> <ui:include src="Report.xhtml"/> </h:panelGroup> </div> </h:form> 

Answer 1

Here is a minimal example (I was also kind enough to misinform naming to conform to standards):

 <h:form> <h:selectOneMenu value="#{states.stateName}"> <f:selectItems value="#{states.stateChoices}" /> <f:ajax render=":filter" /> </h:selectOneMenu> </h:form> <h:panelGroup id="filter"> <h:panelGroup rendered="#{not empty states.stateName}"> <h:form rendered="#{not counties.accepted}"> <h:inputText value="#{counties.report}" /> <h:commandButton value="OK" action="#{counties.viewReport}"> <f:ajax execute="@form" render=":filter" /> </h:commandButton> </h:form> <h:form rendered="#{counties.accepted}"> <ui:include src="report.xhtml"/> </h:form> </h:panelGroup> </h:panelGroup> 

Where Counties managed bean has a new boolean accepted property:

 @ManagedBean @ViewScoped public class Counties { private boolean accepted; public void viewReport() { if (some condition) { accepted = true; } } public boolean isAccepted() { return accepted; } }