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

Question

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

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

}