Delete a row in datatable with confirmDialog

Question

My problem consists in deleting an item from data table. When i click on the button delete a confirm Dialog will appear to confirm removing the row from database. If so, the data will be removed but the data table isn't updated unless i logout and login and if i select another item it won't be even deleted.

<h:form id="form">
   <p:panel id="panelform" header="Databases"  >
      <p:dataTable value="#{dataMB.customersDatas}" var="item" id="datas"      rowsPerPageTemplate="5,10,15,20,25,30" paginator="true" rows="10" filteredValue="#{dataMB.filteredDatas}" selectionMode="single" rowKey="#{item.id}"selection="#{dataMB.selectedData}">
       <p:ajax event="rowSelect" update=":form:dataView, :form:deleteButton, :form:viewButton" listener="#{dataMB.onRowSelect}"/>
</p:dataTable>  
                <p:panel>
                  <p:commandButton style="width: 8%;height: 100%" id="viewButton" value="View" oncomplete="dataDialogView.show()" disabled="#{dataMB.disabled}" icon="ui-icon-search" title="data details"/>                 
                  <p:commandButton style="width: 8%;height: 100%" id="deleteButton" value="Delete" oncomplete="deleteDialog.show()" disabled="#{dataMB.disabled}" icon="ui-icon-trash"/>                 
                </p:panel>
   </p:panel>
</h:form>   
     <p:confirmDialog style="position: absolute; width: 50px; border-color: blue" id="deleteData"  message="Your Database Will be completely removed . Are you sure? "                 appendToBody="true" header="Delete Data" severity="alert" widgetVar="deleteDialog">                          
      <h:form>     
         <p:commandButton id="confirm" style="width: 25%;height: 100%" value="Confirm" actionListener="#{dataMB.deleteData()}" update=":form:datas" ajax="true" oncomplete="deleteDialog.hide(); purchase.hide();" >                             
          </p:commandButton>  
                <p:commandButton id="cancel" style="width: 25%;height: 100%" value="Later" onclick="deleteDialog.hide();" type="button" />                           
      </h:form>
     </p:confirmDialog>

deleteData() method in my sessionScoped managed Bean

 public String deleteData() {
        logger.log(Level.SEVERE, "*****delete Data***** ");
        dataBusinessLocal.deleteData(selectedData);
        return "datalist";
    }

You say: The object gets deleted correctly but the updated table is correctly rendered first time when you log out and log in again? This indicates a session management/caching issue. After deleting the selected object, you debugged your "#{dataMB.customersDatas} getter method wether it returns the updated list of object? If not, the problem seems to be somewhere in persistence/caching. If the list returns the correct dataset, double-check if a refresh of the page in your browser (F5) brings any success. — L-Ray
Also, you might give it a try to not update the datatable itself (at least with h:datatable I used to have problems in the past) but the p:panel around it. — L-Ray
@L-Ray my getter method is not returning the updated list, i checked that with returning its size. Plus, i can only delet one item per session ( if i click the delete button another time it does nothing, even the confirm dialog doesn't show up). — junior developper
I fixed the data table's update actually i was getting customersDatas from the init() method that's why it's not getting updating unless i login another time. But i still have the second problem , when i delete 1st item every thing works fine it's deleted and data table is updated but if i select another item to delete it the confirm dialog doesn't show up and nothing appears in the glassfish log — junior developper
@L-Ray When i delete the 1st item i need to refresh the page with F5 to be able to delete another item. Any idea why or how can i fix this?? — junior developper

L-Ray L-Ray · Accepted Answer · 2013-12-16T12:37:06

JSF is session based. To synchronize the state between client (browser) and server, JSF uses a hidden field javax.faces.ViewState. Right now, you are using two forms on the given page:

Clicking Action-Button on Form one
confirming on form two with updating the data table of form one

So, the hidden input field viewState isn't accurate any longer. Two ways I would possibly try:

Does the confirm-box have to be fancy JSF or does a javascript solution the job as well?

<p:commandButton id="deleteButton" 
    value="Delete" 
    disabled="#{dataMB.disabled}" icon="ui-icon-trash"
    actionListener="#{dataMB.deleteData}"
    onclick="if (!confirm('really delete?')) { return false;}" />

might do a similar job.

Possibility two: just rerender the whole form or the panel panelform instead of just the data table. This way a new javax.faces.ViewState should be rendered and the form works fine again.

Also, add a <h:messages /> somewhere in and update it on every step. In case there is a unexpected error, this might show it on the UI.

Hope that helps...

Delete a row in datatable with confirmDialog

1 Answers