JSF和f：ajax用于隐藏/显示div

Question

我正在考虑在Web应用程序上制作一个隐藏/可显示的菜单。 在此之前，我为此目的广泛使用了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元素已首先呈现。 我做错了什么人？

提前致谢。

Answer 1

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

如果那很重要，只需自己指定固定id 。 每个组件都有一个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;
    }

}

Answer 2

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

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

我认为最好的方法是从Java-EE-Tutorial开始学习jsf的基本概念。