Search code examples
primefacesdatatableconfirm-dialog

Update a data table after click button with primefaces


I have a dataTable, saving button, form. When I click on the save button, a confirm dialog is shown with two choices: "yes" or "no". My problem is when I click "yes" to confirm saving my datable is not updated.

I want to show the data in my DataTable without refreshing the page.

<p:commandButton value="#{msg['Save']}" icon="ui-icon-disk" 
                                     actionListener="#{cashMvtView.saveCashMvt()}">
                        <p:confirm header="Confirmation" message="Voulez-vous enregistrer ces informations ?" icon="ui-icon-alert"  />                            
                    </p:commandButton>
                    <p:confirmDialog global="true" showEffect="fade" hideEffect="fade" >
                        <p:commandButton value="Yes" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" update="form2" >

                        </p:commandButton>         
                        <p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
                    </p:confirmDialog>

the Datatable code:

<h:form id="form2">
            <p:accordionPanel activeIndex="0">
                <p:tab title="Recherche" id="tabRech">
                    <p:dataTable var="cashMvt" value="#{cashMvtView.listeFilteredCashMvt}"  
                                 selectionMode="single" filteredValue="#{cashMvtView.listeFilteredCashMvt}"
                                 selection="#{cashMvtView.selectedCashMvt}" 
                                 rowKey="#{cashMvt.id}"  tableStyle="width:auto"
                                 paginator="true" widgetVar="tabRecherche" id="tabRecherche"
                                 paginatorPosition="bottom"  rows="14"
                                 paginatorTemplate="{Exporters} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} 
                                 {RowsPerPageDropdown} {JumpToPageDropdown} {Controle}" 
                                 >
                        <p:ajax event="rowSelect"  listener="#{cashMvtView.onRowSelect}"  update="form form2" id="ajaxRS" />
                        <f:facet name="{Controle}" id="facetControle"> 
                            <p:commandButton id="toggler" type="button" value="Column"  icon="ui-icon-calculator" style="float:right; width: 150px;"/>
                            <p:columnToggler datasource="tabRecherche" trigger="toggler" id="ccc" />
                        </f:facet> 
                        <p:column style="white-space: nowrap" headerText="#{msg['NumMvt']}" sortBy="#{cashMvt.id}" ><h:outputText value="#{cashMvt.id}" /> </p:column>
                        <p:column style="white-space: nowrap" headerText="#{msg['CatMvt']}" sortBy="#{cashMvt.category}" ><h:outputText value="#{cashMvt.category}" /> </p:column>
                        <p:column style="white-space: nowrap" headerText="#{msg['mvtReference']}" sortBy="#{cashMvt.mvtReference}" ><h:outputText value="#{cashMvt.mvtReference}" /> </p:column>
                        <p:column style="white-space: nowrap" headerText="#{msg['Status']}" sortBy="#{cashMvt.stat}" ><h:outputText value="#{cashMvt.stat}" /> </p:column>
                        <p:column style="white-space: nowrap" headerText="#{msg['mvtCode']}" sortBy="#{cashMvt.mvtCode}" ><h:outputText value="#{cashMvt.mvtCode}" /> </p:column>

Solution

  • You should add update="tabRecherche" to your <p:commandButton tag:

    <p:commandButton value="#{msg['Save']}"
                     icon="ui-icon-disk" 
                     actionListener="#{cashMvtView.saveCashMvt()}"
                     update="tabRecherche"
                     >
         <p:confirm header="Confirmation" 
                    message="Voulez-vous enregistrer ces informations ?" 
                    icon="ui-icon-alert"  />                            
    </p:commandButton>