[英]JSF and f:ajax for hiding/showing div
I am thinking of making a hidable/showable menu on my web application. 我正在考虑在Web应用程序上制作一个隐藏/可显示的菜单。 Before this, I used PHP and AJAX extensively for this purpose.
在此之前,我为此目的广泛使用了PHP和AJAX。 However, since HTML element id is regenerated in JSF framework I found out that this method is no longer feasible at least in my scope.
但是,由于在JSF框架中重新生成了HTML元素ID,所以我发现这种方法至少在我的范围内不再可行。
I have read f:ajax tag in JSF and tried to implement it. 我已阅读JSF中的f:ajax标记并尝试实现它。 Apparently no luck for me.
显然我没有运气。 It looks so easy but I still could not find out what I did wrong.
看起来很简单,但我仍然找不到我做错了什么。
I have prepared a prototype to test the f-ajax tag functionality but no luck. 我已经准备好一个原型来测试f-ajax标签的功能,但是没有运气。 Here is the code
这是代码
` <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>`
When I clicked the particular label, nothing happend. 当我单击特定标签时,什么也没发生。 The textA, textB and textC elements are already rendered in the first place.
textA,textB和textC元素已首先呈现。 What did I do wrong guys?
我做错了什么人?
Thanks in advance. 提前致谢。
However, since HTML element id is regenerated in JSF framework
但是,由于HTML元素ID是在JSF框架中重新生成的
If that is so important, just specify fixed id
s yourself. 如果那很重要,只需自己指定固定
id
。 Each component has an id
attribute for that. 每个组件都有一个
id
属性。 This way you should be able to use normal JS/jQuery frameworks whenever applicable. 这样,只要适用,您就应该能够使用普通的JS / jQuery框架。
As to the problem in the concrete question, here's a working example which should get you started. 关于具体问题中的问题,这是一个工作示例,应该使您入门。
<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>
in combination with 与...结合
@ManagedBean
@ViewScoped
public class Bean {
private String show;
public String getShow() {
return show;
}
public void setShow(String show) {
this.show = show;
}
}
reading your code I would first give some general suggestions: 阅读您的代码,我首先会提供一些一般性建议:
outputLabel
. outputLabel
。 Use h:commandLink or h:commandButton instead outputText
should not be inside outputLabel
. outputText
不应位于outputLabel
。 outputLabel is not necessary here outputText
elements at the bottom are always shown unless you use the rendered attribute: <h:outputText id="textA" value="Click" rendered="false" />
. outputText
元素: <h:outputText id="textA" value="Click" rendered="false" />
。 You can use some EL-expression to make the rendered-attribute conditional. I think the best would be to start with the Java-EE-Tutorial to learn about the basic concepts of jsf. 我认为最好的方法是从Java-EE-Tutorial开始学习jsf的基本概念。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.