Refreshing datatable rows after edits(add,modify,delete...)

Question

Possible Duplicate:
How to ajax-update the p:dataTable from inside the p:dataTable itself?

In my xhtml page i have a dataTable containing object of type Group , and a button to add a new group to the datable and eventually in the database I'm using a sessionScoped managed Bean , So i need to refresh my datatable rows after adding a new record .

For this i used the update attribute of the command Button component but the datatable is not refreshed and here's the code :

  <p:fieldset legend="Groups">  

     <p:commandButton id="newGroup" value=" New  Group" onclick="newGoupDlg.show();" 
      type="button" update="groupsDataTable"/>
                   <br/>

      <p:dataTable id="groupsDataTable" var="group" value="#
         {projectAdminisrationMB.groupsList}" 
                    rowKey="#{group.name}"
                     rowIndexVar="rowIndex"
                      binding="#{table}">  

                      <f:facet name="header">  

                      </f:facet>  

                         <p:column id="column2">
            <f:facet name="header">
            <h:outputText value="Group Name"></h:outputText>
            </f:facet>
         <p:graphicImage value="/images/group/#{group.name}.gif" />  


     <h:commandLink action="#{projectAdminisrationMB.showGroupDetails}" 
         value="#{group.name}">  
 <f:setPropertyActionListener target="#{projectAdminisrationMB.selectedGroup}" 
       value="#{group}" />
 <f:setPropertyActionListener target="#{projectAdminisrationMB.selectedGroupName}" 

    value="#{group.name}" />


     <f:setPropertyActionListener target="#
    {projectAdminisrationMB.selectedGroupDescription}" value="#{group.description}" />
       <f:setPropertyActionListener target="#
     {projectAdminisrationMB.selectedGroup.dbRowIndex}" value="#{table.rowIndex}" />

       </h:commandLink>

    </p:column>
        <p:column id="column3">
    <f:facet name="header">
    <h:outputText id="text3" value=" Group Description "></h:outputText>
     </f:facet>
      <h:outputText value="#{group.description}"></h:outputText>
    </p:column>


               <f:facet name="footer">  

                      </f:facet>  
                 </p:dataTable>  


             <p:dialog header="New Group" widgetVar="newGoupDlg"  width="750" 

       showEffect="explode" hideEffect="explode">  
                        <br/>   <br/>  
                        <h:outputText value=" New Group : " /> 

                        <p:inputText id="newGroupName" value="# 

             {projectAdminisrationMB.newGroup.name}">
                          <f:validator validatorId="requiredValidator"></f:validator>
                        </p:inputText>
                         <br/>   <br/>   
                         <h:outputText value="Group Description :" />  
                            <br/>   <br/>   
                         <p:editor id="newGroupDescription" value="# 


        {projectAdminisrationMB.newGroup.description}" width="600"/> 
                        <br/>   <br/>   

         **<p:commandButton id="ValidateNewGroup"  value="Validate"  
            actionListener="#{projectAdminisrationMB.addNewGroup}" 
            onclick="newGoupDlg.hide()"  update="groupsDataTable" ></p:commandButton>**


                        <p:commandButton id="CancelNewGroup" value=" Cancel " 
              onclick="newGoupDlg.hide()"></p:commandButton>

                    </p:dialog>  

                    <br/>   <br/>   

               </p:fieldset>

Any idea will be apprecited

Try to check for errors in firebug. Possible cause is that your `dataTable` has prepended `id`. Try to set `prependId="false"` to your `form` or use `update=":groupsDataTable"` or `update="fooFormId:groupsDataTable"`. Also I suggest don't use `onclick` but rather `oncomplete` in your buttons - sometimes it can cause problems (but of course it matters on situation). — Fallup, Sep 22 '12 at 11:18
Where is the enclosing form(s) for these components? Are you using the SessionScoped bean as the backing bean for the entire page or just the container to access the database? — kolossus, Sep 23 '12 at 01:48
@kolossus the sessionScoped bean is used for the entire page — Amira, Sep 23 '12 at 09:30

score 2 · Answer 1 · answered Sep 22 '12 at 18:30

2

The most common cause for your problem is that the id of the data table isn't referenced properly.

Check in your browser what the actual id of the data table is.

When your data table is in a container like a form the id of the container is prepended to the id of the data table separated (by default) by a :.

So this:

<h:form id="form">
    <p:dataTable id="dt" ...
</h:form>

Will result in the data table having an id of form:dt

When referring to an element inside a container from within another container you need to begin the search from the root. This is done by adding a : in front of the id.

Example:

<h:form id="form">
    <p:dataTable id="dt" ...
</h:form>

<h:form id="btnForm">
    <p:commandButton update=":form:dt" ...
</h:form>

You can also use binding:

<h:form binding="#{form}">
    <p:dataTable id="#{dt}" ...
</h:form>

<h:form id="#{btnForm}">
    <p:commandButton update=":#{dt.clientId}" ...
</h:form>

answered Sep 22 '12 at 18:30

siebz0r

18,867
14
64
107

wont an exception be thrown if the context couldn't find the specified client ID in JSF2? – kolossus Sep 23 '12 at 01:48
@kolossus: `` will, yes. `` won't, no. – BalusC Sep 23 '12 at 04:12
@BalusC Just checked, (and i'm sure others do too) failed. It compiles the page but the exception is still thrown: `SEVERE: javax.faces.FacesException: Cannot find component with identifier "pickedGrams" referenced from "j_idt32:grammarMgmtMenu"`. PF 3.4RC1 – kolossus 1 hour ago – kolossus Sep 23 '12 at 06:08
@siebz0r thank you but it didn't work i will call findAll method after clicking the add button – Amira Sep 23 '12 at 09:28

Refreshing datatable rows after edits(add,modify,delete...)

1 Answers1