JSF和F：AJAX的隐藏/显示DIV [英] JSF and f:ajax for hiding/showing div

问题描述

我想到做一个hidable / showable菜单上我的Web应用程序。在此之前，我使用PHP和AJAX广泛用于这一目的。然而，由于HTML元素的ID是再生在JSF框架中我发现，这种方法不再可行，至少在我的范围。

在JSF AJAX标签，并试图实现它：

我看过F。显然，没有运气的我。它看起来很容易，但我还是没能找出我做错了什么。

我有prepared原型来测试F-AJAX标签功能，但没有运气。这里是code

 `＆LT; H：身体GT;
     ＆所述; H：outputLabel＆GT;
        ＆LT; H：的outputText值=点击/＆GT;
        ＆LT; F：Ajax事件=点击渲染=TEXTA/＆GT;
    ＆LT; / H：outputLabel＆GT;
    ＆所述; H：outputLabel＆GT;
        ＆LT; H：的outputText值=点击B/＆GT;
        ＆LT; F：Ajax事件=点击渲染=textB/＆GT;
    ＆LT; / H：outputLabel＆GT;
    ＆所述; H：outputLabel＆GT;
        ＆LT; H：的outputText值=点击C/＆GT;
        ＆LT; F：Ajax事件=点击渲染=textC/＆GT;
    ＆LT; / H：outputLabel＆GT;

    ＆LT; H：的outputText ID =TEXTA值=点击/＆GT;
    ＆LT; H：的outputText ID =textB值=点击B/＆GT;
    ＆LT; H：的outputText ID =textC值=点击C/＆GT;
    ＆LT; / H：身体GT;`
 

当我点击特定的标签，没有什么happend。该TEXTA，textB和textC内容已经呈现在首位。我做了什么错了人？

在此先感谢。

解决方案

  

然而，由于HTML元素的ID是再生在JSF框架

如果是这样的重要，只需指定固定 ID 取值自己。每个组件都有一个 ID 属性这一点。这样，您应该可以正常使用JS / jQuery的框架时适用。

至于在具体问题的问题，这里有一个工作的例子，应该让你开始。

＆LT; H：形式GT;     ＆LT; F：AJAX渲染=文本＆GT;         ＆LT; H：commandLink值=点击行动=＃{bean.setShow（'A'）}/＆GT;＆LT; BR /＆GT;         ＆LT; H：commandLink值=点击B行动=＃{bean.setShow（'B'）}/＆GT;＆LT; BR /＆GT;         ＆LT; H：commandLink值=点击C行动=＃{bean.setShow（'C'）}/＆GT;＆LT; BR /＆GT;     ＆LT; / F：AJAX＆GT;     ＆LT; H：panelGroup中的id =文本＆GT;         ＆LT; H：的outputText值=点击了渲染=＃{bean.show =='A'}/＆GT;         ＆LT; H：的outputText值=已点击B呈现=＃{bean.show =='B'}/＆GT;         ＆LT; H：的outputText值=已点击C呈现=＃{bean.show =='C'}/＆GT;     ＆LT; /小时：panelGroup中＆GT; ＆LT; /小时：形式GT;

与组合

  @ManagedBean
@ViewScoped
公共类豆{

    私人字符串显示;

    公共字符串getShow（）{
        回报显示;
    }

    公共无效setShow（字符串显示）{
        this.show =显示;
    }

}
 

I am thinking of making a hidable/showable menu on my web application. Before this, I used PHP and AJAX extensively for this purpose. 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.

I have read f:ajax tag in JSF and tried to implement it. 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. 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. What did I do wrong guys?

Thanks in advance.

解决方案

However, since HTML element id is regenerated in JSF framework

If that is so important, just specify fixed ids yourself. Each component has an id attribute for that. This way you should be able to use normal JS/jQuery frameworks whenever applicable.

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

}

这篇关于JSF和F：AJAX的隐藏/显示DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！