Question

I am using JSF 2.0, tomahawk, and some f:ajax thing in my development. I am trying make some magic word to my JSF application. When you click on the word, it will change to the other, and click on it again will change it back again. To make it more clear, here is a scenario. Original word showing XX, when click on the XX, the XX will change to YY. When click on the YY, will change back to XX. Do you feel the magic? 😛

This is how I make it. I create 2 h:panelGroup. One will contain a XX word and the other one will contain YY word, like this:

<h:panelGroup id="Panel_X">
   <h:outputText value="XX" />
</h:panelGroup>

<h:panelGroup id="Panel_Y">
   <h:outputText value="YY" />
</h:panelGroup>

To make it clickable, I use commandLink. Modify from the code above and become this:

<h:panelGroup id="Panel_X" rendered="#{magicBean.show_X == true}">
   <h:commandLink action="#{myBean.doFunc}">
      <f:ajax event="action" render="Panel_Y"/>
      <h:outputText value="XX" />
   </h:commandLink>
</h:panelGroup>

<h:panelGroup id="Panel_Y" rendered="#{magicBean.show_X == false}">
   <h:commandLink action="#{myBean.doFunc}">
      <f:ajax event="action" render="Panel_X"/>
      <h:outputText value="YY" />
   </h:commandLink>
</h:panelGroup>

Here is the backing bean:

@ManagedBean(name = "magicBean")
@SessionScoped
public class MagicWordBean {

   public boolean show_X = true;

   /** getter and setter of show_X **/

   public String doFunc() {

      showX = !showX;
      return "";
   }
}

I am not sure whether I am doing it correctly but one thing I am sure it doesn’t work. Initially when the page is loaded, it shows XX word. When clicking on the XX word, YY word doesn’t show, and XX word remain there.

Any clue on this?

Answer 1

I think that the render="Panel_Y" is your problem: you are trying to render something that is not rendered on the page in the first place. Try to render the parent/container (i.e. the h:form containing both panels) which will re-evaluate the rendered="#{magicBean.show_X == false}" in your second panel.
I can also suggest changing the later to rendered="#{magicBean.show_Y}" for readability…