Mapping a component outside the form area in JSF2

Question

I am creating a simple page that, after clicking the button, will replace one PanelGroup with another. First, the code:

<h:body> <ui:composition template="/elements/templateWithMenu.xhtml"> <ui:define name="content"> <div class="rightContent"> <h:panelGroup id="lol" rendered="#{test.firstStep.booleanValue()}"> <h3>This should disappear</h3> <h:form id="newPollForm1" rendered="#{test.firstStep.booleanValue()}"> <fieldset> <h:commandLink value="Next" action="#{test.firstStepCompleted()}" > <f:ajax execute="@all" render="lol" /> </h:commandLink> </fieldset> </h:form> </h:panelGroup> <h:panelGroup rendered="#{test.secondStep.booleanValue()}"> Works! </h:panelGroup> </div> </ui:define> </ui:composition> </h:body> 

Substituting a bean simply sets firstStep to false, and secondStep to true.

Now that I tried to run this, I got <f:ajax> contains an unknown id 'lol' - cannot locate it in the context of the component j_idt39 . Having worked a bit with the search, I found out that for elements outside the form area I need to use SEPARATOR_CHAR (:). This did not work. So I tried using different combinations of # {component} and # {cc}, but nothing works. I even found this amazing explanation, but then again, I failed unsuccessfully. If I use @all, everything will be fine (one panel is replaced by another), but I really need to display a specific component.

Help? You are welcome?

Answer 1

Instead, you need to update the generic parent <div class="rightContent"> . This one is always visualized and thus ensures that JavaScript / Ajax can access and focus its children. Replace it with <h:panelGroup layout="block"> and give it an id .

 <h:panelGroup layout="block" id="content" class="rightContent"> <h:panelGroup rendered="#{test.firstStep}"> <h3>This should disappear</h3> <h:form id="newPollForm1"> <fieldset> <h:commandLink value="Next" action="#{test.firstStepCompleted()}" > <f:ajax execute="@form" render=":content" /> </h:commandLink> </fieldset> </h:form> </h:panelGroup> <h:panelGroup rendered="#{test.secondStep}"> Works! </h:panelGroup> </h:panelGroup> 

Using this Test.java class:

 import javax.faces.bean.ManagedBean; import javax.faces.bean.ViewScoped; @ManagedBean @ViewScoped public class Test { private int number = 0; public void firstStepCompleted() { number++; } public boolean isFirstStep() { return number == 0; } public boolean isSecondStep() { return number == 1; } } 

Note that I removed the extra calls to Boolean#booleanValue() and the duplicated rendered expression on the form.

If this still does not work, then /elements/templateWithMenu.xhtml apparently contains another component of the naming container that added its identifier. For beginners who have not yet remembered all the components of the container naming container, an easy way to determine the real correct client identifier is to open the page in the browser, right-click and View Source, and then find the HTML element created by the JSF and take its id attribute value (and its prefix c : in <f:ajax render> ).