JSF显示/隐藏div组件 [英] JSF Display / Hide div components

问题描述

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

过滤器组件具有CommandButton和用户填充过滤器信息。点击按钮并且过滤器被批准后，应用程序应该加载另一个组件 - Report.xhtml代替过滤器组件。那就是过滤组件应该由底部内容部分的报告取代。

点击selectOneMenu项目应重复此过程。这是显示过滤器屏幕等。

问题区域
1.无法显示过滤器表单并隐藏内容部分的报告表单
2 。Filter的后台bean - commandButton OK应该返回值。取决于结果，报告应显示在过滤器的位置。

我不确定设计是否准确，如果这不会按预期工作，请建议并您的宝贵答案将不胜感激。我想保持应用程序基于Ajax，我不想重新加载按钮事件的整个页面。

GDK

---

 < h：form id =form1> 
< h：selectOneMenu value =＃{states.stateName}> 
< f：selectItems value =＃{states.stateChoices}/> 
< f：ajax render =：Filter/> 
< / h：selectOneMenu> 
< / h：表格> 
< h：form id =Filter> 
< div id =content> 
 ＃{states.stateName} 
< br />报告
< h：inputText id =reportvalue =＃{Counties.report}style =width： 150像素/> 
< h：commandButton id =OKvalue =OKactionListener =＃{Counties.getReports}> 
< f：param name =CatNamevalue =Dekalb/> 
< / h：commandButton> 
< / h：panelGroup> 
< / div> 
< / h：表格> 
< h：form id =报告> 
< div id =content> 
 < ui：include src =Report.xhtml/> 
< / h：panelGroup> 
< / div> 
< / h：表格> 
  

解决方案

下面是一个最小值示例（我也非常善良，以符合标准清理命名）：

 < h：form> 
< h：selectOneMenu value =＃{states.stateName}> 
< f：selectItems value =＃{states.stateChoices}/> 
< f：ajax render =：filter/> 
< / h：selectOneMenu> 
< / h：表格> 
< h：panelGroup id =filter> 
< h：panelGroup rendered =＃{not empty states.stateName}> 
 < h：inputText value =＃{counties.report}/> 
< h：commandButton value =OKaction =＃{counties.viewReport}> 
 < / h：commandButton> 
< / h：表格> 
< h：表单呈现=＃{counties.accepted}> 
< ui：include src =report.xhtml/> 
< / h：表格> 
< / h：panelGroup> 
< / h：panelGroup> 
  

其中 Counties 托管bean有一个新的 boolean 属性接受：

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

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>

解决方案

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

}

这篇关于JSF显示/隐藏div组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！