Re rendering content not previously rendered

If you are just starting with RichFaces, it’s likely you will run into this case.




 ...

The page is rendered for the first time and #{bean.show} is evaluated to false. This means the panel grid is now rendered. Keep in mind, the actual component is still in the component tree. No HTML is being rendered back to the browser, the browser doesn’t know anything about this component.

Now, you click the button, #{bean.show} is evaluated to true, and you are trying to re render the panel grid. But, it doesn’t work. Nothing is rendered. Here is what happens. Remember that when the page was shown for the first time, no HTML was rendered. This basically means there is nothing in browser’s DOM about this component (more correct HTML). So, when the button is clicked, content is rendered back to the browser, but the JavaScript client inside the browser doesn’t know what part of the DOM to update with this content as it didn’t exist before. Update is done based on id’s, in this case, it’s looking for id of items, but can’t find it (actually form:id). How do we solve this problem? Well, one way is to create a place holder. The following two are basically identical:

We are putting a place holder around the grid and re rendering it instead:




   
 ...
  

You can also use h:panelGrid instead of h:panelGroup.

this is virtually the same thing:




   
 ...
  

Why would you use a4j:outputPanel instead of h:panelGroup, because this will also work:




   
 ...
  

with ajaxRendered=”true”, we no longer to point to the grid via reRender. Setting this attribute to true tells RichFaces to always re render this component.

Get up to speed with RichFaces in just 1 day.

7 thoughts on “Re rendering content not previously rendered

  1. This solution has few problems.

    Lets take this scenario.

    I want to display a calender when I select a checkbox and hide it on unselect.

    I want to do this on client side only which is not possible this way I guess.

    Render atribute wont serve our interest, which makes us to fall back to javascript or Ajax in this situation.

    Thanks.
    Kiran

  2. @Kiran: I wouldn’t’ say it’s a problem, it’s just how JSF works. For you case, if you want to do it client side, then yes, you have to use JavaScript to show/hide the calendar. This might help: http://in.relation.to/12480.lace . You need to set ‘display’ property to none (on the calendar element).

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s