Ajax update in primefaces

Ajax is a very fantastic component in we applications which reduces lots of time consuming in loading page.


I just did a simple application by which i have learned some concepts


<p:ajax>

• Here  p:ajax  is component from primefaces and which is used to update the pages asynchronously .
• Instead of loading the entire page
• For Example i tried p:ajax for dataTable component in ehich the contents will be loaded dunamically from the bean class.
• So my task is to update the dataTable alone in an web-page when content is loaded in backend.
• To acheive this task by p:ajax event  which is an partially loaded component ,it reload the dataTable alone and get the data's from bean class

Example

     XHTML page


            <p:dataTable var="leavereq" value="#{leaverequest.requestlist}" id="requestlist"  >
        
        <p:column headerText="Leave From" id="reqfrom" style="width:100px;" > 
             <h:outputText value="#{leavereq.from}" /> 
        </p:column>
       
        <p:column headerText="Leave To"  id="reqto" style="width:100px;" > 
               <h:outputText value="#{leavereq.to}" /> 
        </p:column>
       
     
        </p:dataTable> 

Ajax Component


  <p:commandButton id="submitButton" value="Accept"  >
          <p:ajax update="requestlist" listener="#{leaverequest.submit}"/>
   </p:commandButton> 
   

Bean Class
  

     public void submit()
    { 
       requestlist.remove(0); //For Every Click removing one list
    }
  

The above codes updates dataTable when the user click the Ajax submitButton