javascript 如何显示/隐藏 jsf 组件

How to Display / Hide jsf components

提问by GDK

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.

在我的一个 JSF 应用程序中，顶部的标题部分包含 selectOneMenu，底部的内容部分显示过滤组件。默认情况下，应用程序首先在顶部显示 selectOneMenu 数据，在底部显示相应的 Filter 信息。如果用户选择不同的 selectOneMenu 数据，则应在底部内容部分加载相应的 Filter 信息。

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.

过滤器组件有命令按钮和用户填写过滤器信息。单击该按钮并批准过滤器后，应用程序应加载另一个组件 - Report.xhtml 来代替过滤器组件。即过滤器组件应替换为底部内容部分的报告。

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

单击 selectOneMenu 项应重复该过程。即显示过滤画面等。

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.

问题区域 1. 无法在内容部分显示过滤器表单和隐藏报告表单 2. 过滤器的支持 bean - commandButton OK 应返回值。根据结果​​，应显示报告而不是过滤器。

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.

我不确定设计是否准确，如果这不能按预期工作，请提出建议，我们将不胜感激。我想保持基于 ajax 的应用程序，我不想在按钮事件上重新加载整个页面。

GDK

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>

回答by BalusC

Here's a minimumexample (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 Countiesmanaged bean has a new booleanproperty accepted:

当Counties管理bean有一个新的boolean属性accepted：

@ManagedBean
@ViewScoped
public class Counties {

    private boolean accepted;

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

    public boolean isAccepted() {
        return accepted;
    }

}