Lazy loading parts of seam pages?

Question

Hi All

I'm working on a seam application (2.1.1.GA under JBoss AS 4.2.2) where a particular has a number of (sometimes large) sections that do not need to be rendered untill the user interacts with that particular section, think along the lines of an article title where the user clicks on the title and it expands to show a box containing the text.

I can implement this without any problems with Seam and Richfaces but the contents of all the sections are downloaded to the browser when the user first loads the page. Is there anyway for these sections (which may or may not contain richfaces controls themselves) to be downloaded on demand using ajax?

Thanks.

Answer 1

Lots of ways.

Just set rendered="false" on the box and then reRender it's parent container when you click the title.

eg. Where you have a boolean called showContent in your backing Bean that is toggled by the toggleContent() method:

<a4j:commandLink 
   value="This is a title" 
   ajaxSingle="true" 
   reRender="contentDiv" 
   action="#{someBackingBean.toggleContent}"/>

<a4j:outputPanel id="contentDiv">
   <a4j:outputPanel rendered="#{someBackingBean.showContent}">
      This is some text that is not rendered when the page loads
   </a4j:outputPanel>
</a4j:outputPanel>

EDIT: In response to comment. Another way to do it would be to use the a4j:jsFunction (very handy) and some javascript.

<h1 onclick="toggleContent(this);">This is a title</h1>
<a4j:outputPanel id="contentDiv">
   <a4j:outputPanel rendered="#{someBackingBean.showContent}">
      This is some text that is not rendered when the page loads
   </a4j:outputPanel>
</a4j:outputPanel>

<script>
function toggleContent(element) {
   //check if the contentDiv has any contents (maybe check if element has a child under contentDiv)

   //if it doesn't then call a4j:jsFunction to load the contentDiv eg. loadContent();

   //hide or show div depending on the current state of it
}
</script>

<a4j:jsFunction name="loadContent" action="#{someBackingBean.toggleContent}" reRender="contentDiv"/>

Something like this anyway.

Answer 2

What about if you using scrollable table. How to implement fetching data in chunks?

Ragards Marko