Refreshing datatable rows after edits(add,modify,delete...) [duplicate] - ajax

Question

This question already has an answer here:
Closed 10 years ago.
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

Answer 1

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>