JSF and f:ajax for hiding/showing div

Question

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.

Answer 1

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

}