h:dataTable to display records without page being refreshed.

[shanikaweerapperuma]

Hi,

Senario:
My form must allow user to key in Book name, Description and couple of BookVersions (represented in a data table). So I have 2 text fields(color, quality) to add the version info and a "Add Version" button to display the keyed in version data in a table at the bottom of the form.

When the user clicks on the "Create Book"  button all the details of the book along with the versions shown in the table gets added to the database.

Issue :

My problem is how to display the version records in a datatable at the bottom of the form when user clicks on "Add Version" button. I don't want "Add Version" to submit the entire pagee, but the records must appear in my datatable. I use JSF,Facelets,seam and Ajax/Rich components. My seam page has following:

<s:decorate id="addVersionCmd" template="layout/display.xhtml">                        
                                               <a:commandButton  id="add" ajaxSingle="true" value="Add Version" action="#{CreateBook.addVersion()}"/>                                          
</s:decorate>
-
-

<a:outputPanel id="versionList">
<H1>Book Versions</H1>
<div class="Section">                         
<h:dataTable id="vertbl" value="#{tempVersions}" var="bookVer" headerClass="thfmt" rowClasses="row1,row2" rendered="true">                            
                                   <h:column id="column1">
                                        <f:facet id="NameFacet" name="header">Color</f:facet>
                                        #{bookVer.color}
                                   </h:column>     
                                   <h:column id="column2">
                                        <f:facet id="NameFacet" name="header">Quality</f:facet>
                                        #{bookVer.quality}
                                   </h:column>                         
                              </h:dataTable>
      </div>     
</a:outputPanel>

My CreateBook stateful "session" scoped session bean has following:

@DataModel
private List<BookVersion> tempVersionList = new
ArrayList<BookVersion>();

@Factory("tempVersions ")
public void findBookVersions()
{
  tempVersionList = em.createQuery("select e.versions  from Book e ").getResultList();
}

But my "Add Version" button does not display the added versions in the form datatable even though the tempVersionList has the record that was entered. Please help.

Thanks
Shanika