JSF 和 f:ajax 用于隐藏/显示 div答案

【问题标题】：JSF and f:ajax for hiding/showing divJSF 和 f:ajax 用于隐藏/显示 div
【发布时间】：2011-06-23 20:33:38
【问题描述】：

我正在考虑在我的网络应用程序上制作一个可隐藏/可显示的菜单。在此之前，我为此目的广泛使用了 PHP 和 AJAX。但是，由于在 JSF 框架中重新生成了 HTML 元素 id，我发现这种方法至少在我的范围内不再可行。

我已经阅读了 JSF 中的 f:ajax 标签并尝试实现它。显然我没有运气。看起来很简单，但我仍然无法找出我做错了什么。

我已经准备了一个原型来测试 f-ajax 标签的功能，但是没有运气。这是代码

   ` <h:body>
     <h:outputLabel>
        <h:outputText value="Click A" />
        <f:ajax event="click" render="textA"/>
    </h:outputLabel>
    <h:outputLabel>
        <h:outputText value="Click B" />
        <f:ajax event="click" render="textB"/>
    </h:outputLabel>
    <h:outputLabel>
        <h:outputText value="Click C" />
        <f:ajax event="click" render="textC"/>
    </h:outputLabel>

    <h:outputText id="textA" value="Click A" />
    <h:outputText id="textB" value="Click B" />
    <h:outputText id="textC" value="Click C" />
    </h:body>`

当我单击特定标签时，没有任何反应。 textA、textB 和 textC 元素已经在第一时间呈现。我做错了什么？

提前致谢。

【问题讨论】：

标签： java ajax jsf webforms jakarta-ee

【解决方案1】：

但是，由于 HTML 元素 id 是在 JSF 框架中重新生成的

如果这很重要，请自己指定固定的ids。每个组件都有一个id 属性。这样，您应该能够在适用的情况下使用普通的 JS/jQuery 框架。

至于具体问题中的问题，这是一个可以帮助您入门的工作示例。

<h:form>
    <f:ajax render="text">
        <h:commandLink value="Click A" action="#{bean.setShow('A')}" /><br/>
        <h:commandLink value="Click B" action="#{bean.setShow('B')}" /><br/>
        <h:commandLink value="Click C" action="#{bean.setShow('C')}" /><br/>
    </f:ajax>

    <h:panelGroup id="text">
        <h:outputText value="Clicked A" rendered="#{bean.show == 'A'}" />
        <h:outputText value="Clicked B" rendered="#{bean.show == 'B'}" />
        <h:outputText value="Clicked C" rendered="#{bean.show == 'C'}" />
    </h:panelGroup>
</h:form>

结合

@ManagedBean
@ViewScoped
public class Bean {

    private String show;

    public String getShow() {
        return show;
    }

    public void setShow(String show) {
        this.show = show;
    }

}

【讨论】：

【解决方案2】：

阅读您的代码，我首先会给出一些一般性建议：

据我所知，ajax 适用于输入元素，但不适用于outputLabel。请改用 h:commandLink 或 h:commandButton
outputText 不应在 outputLabel 内。这里不需要 outputLabel
底部的outputText 元素始终显示，除非您使用渲染属性：<h:outputText id="textA" value="Click" rendered="false" />。您可以使用一些 EL 表达式来使渲染属性有条件。

我认为最好还是从Java-EE-Tutorial开始了解jsf的基本概念。

【讨论】：