JSF 渲染条件答案

【问题标题】：JSF rendered conditionJSF 渲染条件
【发布时间】：2012-11-28 19:55:10
【问题描述】：

我有以下 GUI 元素：一个下拉菜单，用于选择是要自己输入文本还是要从预定义的文本中进行选择。

<h:form id="test">
<div>
  <h:outputLabel value="Please select:" />
  <h:selectOneMenu value="#{myform.selection}">
    <f:selectItem itemValue="1" itemLabel="Input text" />
    <f:selectItem itemValue="2" itemLabel="Select from predefined texts" />
  </h:selectOneMenu>
</div>
<div>
  <h:outputLabel value="Your text: " />
  <h:inputText value="#{myform.inputText}" rendered="#{myform.selection == 1}" />
  <h:selectOneMenu value="#{myform.inputText}" rendered="#{myform.selection == 2}">
    <f:selectItem itemValue="11" itemLabel="Preselected text 1" />
    <f:selectItem itemValue="22" itemLabel="Preselected text 2" />
  </h:selectOneMenu>
</div>
</h:form>

如何正确编程渲染条件？

更新：当表单加载时，1 已经被选中，所以 inputText 被渲染。问题是当我将选择更改为 2 时没有任何反应。我们使用基于 JSF 1.2 的修改后的 JSF 库

【问题讨论】：

rendered 条件是正确的，但是当用户从第一个 selectOneMenu 中选择一个值时，您需要使用 a4j 使组件出现/消失。您使用的是哪个版本的 JSF？
我想我也可以使用 javascript。 h:selectOneMenu 有 onclick 吗？
JavaScript 是在客户端执行的...我想说不可能使用 JavaScript 更改 JSF 属性。
你在使用 Richfaces 吗？

标签： jsf

【解决方案1】：

如果您不喜欢使用a4j 库，您可以使用show/hide 组件，如下所示使用javascript。将onchange 事件添加到您的第一个selectOneMenu

<h:selectOneMenu value="#{myform.selection}" onchange="myFunction(this.value)">

将Ids 添加到您的textBox 和selectOneMenu，如下所示。

<h:inputText value="#{myform.inputText}" rendered="#{myform.selection == 1}" id="myText"/>
<h:selectOneMenu value="#{myform.inputText}" rendered="#{myform.selection == 2}" id="mySelectMenu">

最后你的javascript 函数应该如下。

<script>
    function myFunction(selection) {
        if(selection == 1) {
            document.getElementById("test:myText").style.display = "";
            document.getElementById("test:mySelectMenu").style.display = "none";
        } else {
            document.getElementById("test:myText").style.display = "none";
            document.getElementById("test:mySelectMenu").style.display = "";
        }
    }
</script>

【讨论】：

您想将rendered="false" 替换为style="display:none"，否则客户端根本没有HTML 表示。
是的，这有帮助。我最大的问题实际上是获取选择下拉列表的内容 - 我不知道 this.value ;)

【解决方案2】：

如果您没有任何限制，我建议您使用a4j 添加 AJAX 功能。当您使用 JSF 1.2 时，您需要使用 RichFaces 3.3.X 库并将此标记添加到您的 JSF 文件中：

<%@ taglib uri="http://richfaces.org/a4j" prefix="a4j"%>

然后以这种方式使用a4j:support 修改您的代码：

<h:form id="test">
<div>
  <h:outputLabel value="Please select:" />
  <h:selectOneMenu value="#{myform.selection}">
    <f:selectItem itemValue="1" itemLabel="Input text" />
    <f:selectItem itemValue="2" itemLabel="Select from predefined texts" />
    <a4j:support event="onchange" reRender="textSection" ajaxSingle="true"/>
  </h:selectOneMenu>
</div>
<div>
  <h:outputLabel value="Your text: " />
  <a4j:outputPanel id="textSection">
      <h:inputText value="#{myform.inputText}" rendered="#{myform.selection == 1}" />
      <h:selectOneMenu value="#{myform.inputText}" rendered="#{myform.selection == 2}">
        <f:selectItem itemValue="11" itemLabel="Preselected text 1" />
        <f:selectItem itemValue="22" itemLabel="Preselected text 2" />
      </h:selectOneMenu>
  </a4j:outputPanel>
</div>
</h:form>

当用户从 selecOneMenu 更改选择时，现在包装您要显示/隐藏的组件的 a4j:outputPanel 将被重新渲染，rendered 属性将被重新计算。

【讨论】：