JSF RichFaces – Combine ReRender With CSS Display, Not Rendered

by Michael Scepaniak on October 8, 2010 in software development

RichFaces reRender attribute is very convenient and powerful. Basically, it allows you to dictate that one or more components on a page re-render when something else happens – like when a button is pressed, link is clicked, or JavaScript function is called. But, one frustration that many developers run into sooner or later is when the reRender doesn’t seem to work. There’s one very important thing to remember about reRender

You can’t re-render something you never rendered in the first place.

Here’s an example. You’ve got a page with a submit button. When the button is submitted (in this case, via AJAX using a JavaScript function), you’d like to display a confirmation message to the user. See below:

<h:outputText
    id="submitConfirmMsg"
    value="Got it!"
    rendered="false" />

<a4j:jsFunction
    name="submitSomething"
    action="#{thePage.submitSomethingAjax}"
    reRender="submitConfirmMsg" />

<a4j:commandButton
    id="submitButton"
    onclick="submitSomething(); return false;"
    value="Submit" />

The intention is that, when the JavaScript function finishes the AJAX call, the outputText component should appear. But, because we don’t want the message to appear until after the submission is made, we want to hide it when the page is first loaded. As such, we set the outputText’s rendered attribute to false. That makes perfect sense, but it don’t work. What it does is make it impossible to re-render the outputText – because it was never rendered in the first place. The “correct” way to accomplish this is to use the the very non-JSF-ish CSS display attribute, like so:

<h:outputText
    id="submitConfirmMsg"
    value="Got it!"
    style="display: #{thePage.submissionSuccess ? 'block' : 'none'}" />

Twiddle the display attribute based on a property of the backing page/bean. This way, the component is rendered when the page is first loaded, making it eligible for re-rendering.

These examples were coded using JSF v1.2.x and RichFaces v3.3.x

Hope this helps.

Mike
Want to be notified when new articles are posted?
Enter your email address:

{ 0 comments… add one now }

Leave a Comment

Previous post:

Next post:

Member of The Internet Defense League