title: Update JSF datatable without refreshing the page
body: <p>I have input fields and datatable in the same page, in such a way that when user adds a new data, data should be added to the datatable without refreshing the page.</p>
  
  <p>To achieve this I tried the following code</p>
  
  <p>xhtml part</p>
  
  <pre><code>&lt;table border="0"&gt;
          &lt;tr&gt;
              &lt;td width="700" height="100px"&gt;Customer Name: &lt;h:inputText
                  immediate="true" id="customername" autocomplete="false" value="#{salesBean.customerName}"&gt;
  
              &lt;/h:inputText&gt; 
  
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td width="900" height="160px"&gt;
              &lt;table border="1"&gt;
                  &lt;tr&gt;
                      &lt;td align="left"&gt;Product Name&lt;/td&gt;
                      &lt;td align="left"&gt;Rate&lt;/td&gt;
                      &lt;td align="left"&gt;Quantity&lt;/td&gt;
                      &lt;td align="left"&gt;Total Price&lt;/td&gt;
                      &lt;td align="left"&gt;Paid&lt;/td&gt;
                      &lt;td align="left"&gt;Date of Sales&lt;/td&gt;
                      &lt;td align="left"&gt;&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td align="left"&gt;&lt;h:inputText immediate="true"
                          id="productname" autocomplete="false" value="#{salesBean.productName}"&gt;
  
  
                      &lt;/h:inputText&gt;&lt;/td&gt;
                      &lt;td align="left"&gt;&lt;h:outputText id="rate"
                          binding="#{salesBean.productRate}" /&gt;&lt;/td&gt;
                      &lt;td align="left"&gt;&lt;h:inputText size="2"
                          onkeyup="return calculateTotalRate(event);" id="quantity" value="#{salesBean.quantity}"/&gt;&lt;/td&gt;
                      &lt;td align="left"&gt;&lt;h:outputText id="totalprice" /&gt;&lt;/td&gt;
                      &lt;td align="left"&gt;&lt;h:selectOneRadio  id="sor"
                          title="Select any one of the choice" value="#{salesBean.paidFlag}"&gt;
                          &lt;f:selectItem id="si1" itemLabel="Yes" itemValue="yes" /&gt;
                          &lt;f:selectItem id="si2" itemLabel="No" itemValue="no" /&gt;
                      &lt;/h:selectOneRadio&gt;&lt;/td&gt;
                      &lt;td align="left"&gt;&lt;rich:calendar id="salesDate" value="#{salesBean.salesDate}"&gt;&lt;/rich:calendar&gt;&lt;/td&gt;
                      &lt;td align="center"&gt;
                      &lt;h:commandButton value="Submit"&gt;                        
                          &lt;a4j:support action="#{salesBean.submit}" reRender="table"&gt;&lt;/a4j:support&gt;
                      &lt;/h:commandButton&gt;
                      &lt;h:commandButton value="Cancel" /&gt;&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/table&gt;`
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;h:outputText id="errormessage" style="display:inline-block;color:Red;width:300px;"/&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
              &lt;h:panelGroup id="panel"&gt;
                  &lt;rich:dataTable  var="data" id="table" binding="#{salesBean.table}" rendered="#{salesBean.salesHistoryRendered}"&gt;
                      &lt;h:column&gt;
                          &lt;f:facet name="header"&gt;
                                  &lt;h:outputText value="Product Name"/&gt;                                    
                                  &lt;/f:facet&gt;
                          &lt;h:outputText value="#{data.productName}"/&gt;
                      &lt;/h:column&gt;
                      &lt;h:column&gt;
                          &lt;f:facet name="header"&gt;
                                  &lt;h:outputText value="Date of Sale"/&gt;                                    
                                  &lt;/f:facet&gt;
                          &lt;h:outputText value="#{data.dateOfSales}"/&gt;
                      &lt;/h:column&gt;
                      &lt;h:column&gt;
                      &lt;f:facet name="header"&gt;
                                  &lt;h:outputText value="Is Paid?"/&gt;                                    
                                  &lt;/f:facet&gt;
                          &lt;h:outputText value="#{data.paidCheck}"/&gt;
                      &lt;/h:column&gt;
                      &lt;h:column&gt;
                      &lt;f:facet name="header"&gt;
                                  &lt;h:outputText value="Quantity?"/&gt;                                   
                                  &lt;/f:facet&gt;
                          &lt;h:outputText value="#{data.quantity}"/&gt;
                      &lt;/h:column&gt;
  
                  &lt;/rich:dataTable&gt;
                  &lt;h:outputText id="text" binding="#{salesBean.checkValueChangeListener}"/&gt;
                  &lt;/h:panelGroup&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
  
  
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p>Please help me to solve this.  Please update me if my question is not clear.</p>
  
  <p>I am using JSF 1.2 and Richfaces 3.3.2</p>
  
  <p>Thanks in advance</p>