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?

BalusC · Answer 1 · 2014-02-07T16:34:28.727

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>

Thank you for you answer. What I've done is that I used render="@form" in my form and it worked. I will try though what you suggested as well. — sandra, Apr 30 '12 at 22:56
That will indeed also work, as long as it's the component's parent which is *always* rendered (exactly as my answer is trying to tell you). There's maybe only an unnecessary overhead if the form contains 10 other components which doesn't need to be updated at all, for example. — BalusC, Apr 30 '12 at 23:00

score 4 · Answer 2 · edited Feb 28 '16 at 11:23

I know it's not the central point of the question, but as I had this problem many times in the past, I just post it here to help others who are in need. For those who uses PrimeFaces there's a component in PrimeFaces Extension called Switch.

Sometimes you need to display different outputs or components depending on a value. Usually you can achieve this by using the ui:fragment tag. With the pe:switch util tag you won't have to declare ui:fragment tags, with different checks like ui:fragment rendered="#{!empty someController.value}", anymore.

score -1 · Answer 3 · edited Apr 16 '13 at 09:31

-1

style="visibility: #{questionchoose.show==false ? 'hidden' : 'visible'}"

edited Apr 16 '13 at 09:31

Sachin

40,216
7
90
102

answered Apr 16 '13 at 09:13

Eng Ahmed Hamed

27

It's better not render the item at all, rather than just not display it. – dwjohnston Mar 02 '17 at 00:13

Conditional rendering in JSF

3 Answers3

Linked