JSF Показать/скрыть компоненты div

Question

В одном из моих приложений JSF у меня есть часть заголовка наверху, содержащая selectOneMenu, а часть контента внизу, на которой отображаются, говорят, компоненты фильтра. По умолчанию приложение отображает сначала selectOneMenu данные вверху и соответствующую информацию фильтра внизу. Если пользователь выбирает разные данные selectOneMenu, соответствующая информация фильтра должна быть загружена на нижней части содержимого.

Компонент фильтра имеет команду CommandButton и заполняет пользователя. Информация об фильтре. При щелчке по кнопке и одобрении фильтра приложение должно загрузить другой компонент - Report.xhtml вместо компонента Filter. То есть компонент Filter должен быть заменен на Report on bottom content part.

Нажмите кнопку selectOneMenu, чтобы повторить процесс. Это экран экрана фильтра и так далее.

Проблемная область 1. Невозможно отобразить Форма фильтра и скрыть Форма отчета на контентной части 2. Бэк-файл фильтра - commandButton OK должен возвращать значение. В зависимости от результата, отчет должен отображаться вместо фильтра.

Я не уверен, что дизайн является точным, если это не будет работать должным образом, пожалуйста, предложите и ваши ценные ответы будут оценены. Я хотел бы сохранить приложение на основе ajax, и я не хочу перезагружать всю страницу на событие кнопки.

ГДК

---

<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

Вот минимум пример (я был так добр, чтобы дезинфицировать именование соблюдать стандарты):

<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> 

Где Counties управляемый компонент имеет новые boolean Недвижимость accepted:

@ManagedBean 
@ViewScoped 
public class Counties { 

    private boolean accepted; 

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

    public boolean isAccepted() { 
     return accepted; 
    } 

}