Cross form update datatable.

samwun9988 · 28 Feb 2011, 15:20

Hello,

I want to update/refresh a datatable from a dialog, they are in different form.

eg.

<h:form id="roleTableForm">
      <p:outputPanel id="roleTablePanel">
                <p:dataTable id="roleTable"
.......
                </p:dataTable>
      </p:outputPanel>
</h:form>

<h:form id="deleteRoleForm">
        <p:confirmDialog message=""  
                showEffect="fade" hideEffect="fade"  
                header="Initiating destroy process" severity="alert" widgetVar="confirmDelete">    
            ....
            <p:commandButton value="Yes Sure" update="roleTableForm:roleTablePanel:roleTable" oncomplete="confirmDelete.hide()"  
                        actionListener="#{roleController.deleteRole}" />  
            <p:commandButton value="Not Yet" onclick="confirmation.hide()" type="button" />   
        </p:confirmDialog>    
</h:form>

This is currently not working.

What is the change to make this update accross forms?

Thanks a lot
Sam

28 Feb 2011, 15:23

Code: Select all

update=":roleTableForm:roleTable"

outputPanel with id roleTablePanel is not a naming container so you don't need to include that. Forms and Datatables are naming containers.

samwun9988 · 28 Feb 2011, 16:02

Thanks for reploy.
The change doesn't work.

Here is the full code:

Code: Select all

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.prime.com.tr/ui">
    
<h:form id="roleTableForm">
<p:outputPanel id="roleTablePanel">
    <p:dataTable id="roleTable" value="#{roleController.roles}" var="_role" 
            paginatorTemplate="{RowsPerPageDropDown} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {CurrentPageReport}" rows="8"
            emptyMessage="No Records to Display"
            >
        <p:column sortBy="#{_role.roleId}" filterBy="#{_role.roleId}">
            <f:facet name="header">
                <h:outputText value="Role ID" />
            </f:facet>
            <h:outputText value="#{_role.roleId}" />
        </p:column>

        <p:column sortBy="#{_role.roleName}" filterBy="#{_role.roleName}">
            <f:facet name="header">
               <h:outputText value="Role Name" />
             </f:facet>
            <h:outputText value="#{_role.roleName}" />
        </p:column>

        <p:column style="width:32px">  
            <p:menuButton value="Actions">  
                
                <p:menuitem value="Delete"  update="deleteRoleForm:confirmDeletePanelId"
                            oncomplete="confirmDelete.show()" 
                            icon="ui-icon ui-icon-arrowrefresh-1-w">
                    <f:setPropertyActionListener value="#{_role}" target="#{roleController.selectedRole}"/>
                </p:menuitem>
            </p:menuButton>
        </p:column>  
         <f:facet name="footer">
              <p:commandButton value="Refresh" actionListener="#{roleController.refreshTable}" update="roleTableForm:roleTable" />  
        </f:facet>
    </p:dataTable>
</p:outputPanel>   
</h:form>


<h:form id="deleteRoleForm">
        <p:confirmDialog message=""  
                showEffect="fade" hideEffect="fade"  
                header="Initiating destroy process" severity="alert" widgetVar="confirmDelete">    
            
            <f:facet name="message">
                 <p:outputPanel id="confirmDeletePanelId" >  
                    <h:outputFormat value="Delete Role [ ID: #{roleController.selectedRole.roleId}, Role name: #{roleController.selectedRole.roleName} ]?" escape="false">
                    </h:outputFormat>
                 </p:outputPanel>  
            </f:facet>
            <p:commandButton value="Yes Sure" update=":roleTableForm:roleTable" oncomplete="confirmDelete.hide()"  
                        actionListener="#{roleController.deleteRole}" />  
            <p:commandButton value="Not Yet" onclick="confirmDelete.hide()" type="button" />   
        </p:confirmDialog>    
</h:form>
    
</html>

Thanks
Sam

samwun9988 · 01 Mar 2011, 01:05

I have tried many combination,
eg.
roleTableForm:roleTable
roleTableForm,roleTable
:roleTableForm:roleTable
even tried
roleTableForm:roleTablePanel:roleTable
roleTableForm,roleTablePanel,roleTable

all failed to update roleTable.

But if I move the commandbutton inside the roleTableForm, like the Refresh button I did. update="roleTableForm:roleTable" will update the roleTable.

Any idea?

Thanks
Sam

samwun9988 · 01 Mar 2011, 15:46

Hello,

I have changed the sample code of xhtml a bit, moved the confirmation dialog inside the the roleTableForm, it still doesn't refresh the roleTable, please refer to below:

Code: Select all


<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.prime.com.tr/ui">
    
<h:form id="roleTableForm">
<p:outputPanel id="roleTablePanel">
    <p:dataTable id="roleTable" value="#{roleController.roles}" var="_role" 
            paginatorTemplate="{RowsPerPageDropDown} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {CurrentPageReport}" rows="8"
            emptyMessage="No Records to Display"
            >
        <p:column sortBy="#{_role.roleId}" filterBy="#{_role.roleId}">
            <f:facet name="header">
                <h:outputText value="Role ID" />
            </f:facet>
            <h:outputText value="#{_role.roleId}" />
        </p:column>

        <p:column sortBy="#{_role.roleName}" filterBy="#{_role.roleName}">
            <f:facet name="header">
               <h:outputText value="Role Name" />
             </f:facet>
            <h:outputText value="#{_role.roleName}" />
        </p:column>

        <p:column style="width:32px">  
            <p:menuButton value="Actions">  
                <p:menuitem value="Delete"  update="confirmTxtId"
                            oncomplete="confirmDelete.show()" 
                            icon="ui-icon ui-icon-arrowrefresh-1-w">
                    <f:setPropertyActionListener value="#{_role}" target="#{roleController.selectedRole}"/>
                </p:menuitem>
            </p:menuButton>
        </p:column>  
        <f:facet name="footer">  
              In total there are #{roleController.count} roles.  
                  <p:commandButton value="Refresh" actionListener="#{roleController.refreshTable}" update="roleTableForm:roleTable" />  
        </f:facet>
        
    </p:dataTable>
    <p:confirmDialog message="" showEffect="fade" hideEffect="fade" header="Confirmation dialog" severity="alert" widgetVar="confirmDelete">    
        <f:facet name="message">
                <h:outputText id="confirmTxtId" value="Delete Role [ ID: #{roleController.selectedRole.roleId}, Role name: #{roleController.selectedRole.roleName} ]?" escape="false"/>
        </f:facet>
        <p:commandButton value="Yes Sure" update="roleTableForm:roleTable" oncomplete="confirmDelete.hide()" actionListener="#{roleController.deleteRole}" />  
        <p:commandButton value="Not Yet" onclick="confirmDelete.hide()" type="button" />   
    </p:confirmDialog>
    
</p:outputPanel>   
</h:form>
    
</html>

and when I followed the user guide as shown in page 55 to refresh confirmTxtId, that also dosn't work. roleId and roleName are empty.

Have I done anything wrong?

Thanks
Sam

Lalib · 12 Aug 2011, 16:56

I have the same problem.

12 Aug 2011, 17:17

See #7;

viewtopic.php?f=3&t=1194

Cross form update datatable.

Who is online