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 responses to “Re rendering content not previously rendered”

  1. […] Partial tree processing is one of the key concepts in RichFaces, so make sure you understand it. Another core concept is partial tree rendering and more specifically rendering content not previously rendered. You can read about it here. […]

  2. 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

  3. @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).

  4. Thank you very mutch

  5. Thanks, solved my problem.

  6. Thanks a lot..I started with JSF 2 weeks ago..this post saved me a lot of time and effort πŸ™‚

  7. Thanks a lot

Leave a reply to sarat Cancel reply