Conditional rendering in JSF

Question

Hello I have this code to conditionally render components in my page:

<h:commandButton action="#{Bean.method()}"  value="Submit">
   <f:ajax execute="something" render="one two" />
</h:commandButton>

<p><h:outputFormat rendered="#{Bean.answer=='one'}" id="one" value="#{messages.one}"/></p>
<p><h:outputFormat rendered="#{Bean.answer=='two'}" id="two" value="#{messages.two}"/></p>

It gets the answer and renders the component but in order to see it on my page, I need to refresh the page. How can I fix this problem? Any suggestions?

Answer 1

The JSF component's rendered attribute is a server-side setting which controls whether JSF should generate the desired HTML or not.

The <f:ajax> tag's render attribute should point to a (relative) client ID of the JSF-generated HTML element which JavaScript can grab by document.getElementById() from HTML DOM tree in order to replace its contents on complete of the ajax request.

However, since you're specifying the client ID of a HTML element which is never rendered by JSF (due to rendered being false), JavaScript can't find it in the HTML DOM tree.

You need to wrap it in a container component which is always rendered and thus always available in the HTML DOM tree.

<h:commandButton action="#{Bean.method()}"  value="Submit">
   <f:ajax execute="something" render="messages" />
</h:commandButton>

<p>
    <h:panelGroup id="messages">
        <h:outputFormat rendered="#{Bean.answer=='one'}" value="#{messages.one}"/>
        <h:outputFormat rendered="#{Bean.answer=='two'}" value="#{messages.two}"/>
    </h:panelGroup>
</p>

---

Unrelated to the concrete problem, you've there a possible design mistake. Why would you not just create a #{Bean.message} property which you set with the desired message in the action method instead, so that you can just use:

<h:commandButton action="#{Bean.method()}"  value="Submit">
   <f:ajax execute="something" render="message" />
</h:commandButton>

<p>
    <h:outputFormat id="message" value="#{Bean.message}" />
</p>