我正在考虑在我的网络应用程序上创建一个隐藏/可显示的菜单。在此之前,我为此目的广泛使用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元素已经在第一时间呈现。我做错了什么人?
提前致谢。
答案 0 :(得分:7)
但是,因为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;
}
}
答案 1 :(得分:0)
阅读你的代码我首先会给出一些一般性的建议:
outputLabel
。使用h:commandLink或h:commandButton代替outputText
不应在outputLabel
内。这里不需要outputLabel outputText
,否则始终会显示底部的<h:outputText id="textA" value="Click" rendered="false" />
元素。您可以使用某些EL表达式使render-attribute成为条件。我认为最好的方法是从Java-EE-Tutorial开始学习jsf的基本概念。