How to Display / Hide jsf components

Question

In one of my JSF application, I have header part at the top contains selectOneMenu, and the content part at the bottom which display say, Filter components. By default the application display first selectOneMenu data at the top and corresponding Filter information at the bottom. If the user selects different selectOneMenu data, corresponding Filter information should be loaded on bottom content part.

Filter component has CommandButton and user fills Filter information. On click of the button, and the Filter is approved, the application should load another component - Report.xhtml in place of Filter component. That is Filter component should be replaced by Report on bottom content part.

Click on selectOneMenu item should repeat the process. That is display Filter screen and so on.

Problem area 1. Not able to display Filter form and hide Report form on content part 2. Backing bean of Filter - commandButton OK should return value. Depending on outcome, Report should be displayed in place of Filter.

I am not sure the design is accurate, if this is not going to work as intended, please suggest and your valuable answers will be appreciated. I would like to keep the application ajax based and I do not want to reload entire page on 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's a minimum example (I was also so kind to sanitize the naming to comply the 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 property accepted:

@ManagedBean
@ViewScoped
public class Counties {

    private boolean accepted;

    public void viewReport() {
        if (some condition) {
            accepted = true;
        }
    }

    public boolean isAccepted() {
        return accepted;
    }

}