Search code examples
jsfjakarta-eejsf-2primefacesfacelets

Primefaces DataTable - deleting with dialog deletes wrong entry

I have a table in a form. One of the columns in the table displays a row of buttons to edit and delete the table entries. When I delete an entry callign the controller from a button's action attribute, it works as expected.

But once I have added a dialog to let the user confirm the deletion, a wrong entry is deleted. It is always the last entry in the current table. I have no idea what the reason could be - I am using the same DataTable var for the button and for the dialog.

I am working with JSF 2 (Mojarra 2.1.6) and Primefaces 3.5 deploying on JBoss 7.1.1 on a Suse 12.2 machine.

The form:

<h:form id="downloads">
    <ui:include src="components/table.xhtml"/>
</h:form>

The table:

<ui:composition>

  <p:dataTable value="#{controller.currentLevelResources}"
            var="download" id="downloadTable" scrollHeight="120" rows="10">

    <p:column sortBy="#{download.name}">
        <f:facet name="header">Name</f:facet>
        <h:outputText id="downloadName" value="#{download.name}" title="#{download.description}" />
    </p:column>

            ...

    <p:column>
        <ui:include src="menuBar.xhtml"></ui:include>
    </p:column>

The menu bar:

<ui:composition>

        <p:commandButton id="edit"
            action="#{downloadEditController.editResource(download)}"
            icon="ui-icon-gear" title="Edit" oncomplete="updateStyles()"
            update=":downloads" />

        <p:commandButton id="delete" onclick="deletedDlg.show();"
            icon="ui-icon-trash" title="Delete" oncomplete="updateStyles()" />

        <p:dialog header="Delete confirmation" widgetVar="deletedDlg"
            resizable="false">
            <h:panelGroup layout="block" style="padding:5px;">
                <h:outputText
                    value="The Resource #{download} will be deleted. Proceed?" />
            </h:panelGroup>
            <p:commandButton id="deleteBtn" value="Delete"
                oncomplete="deletedDlg.hide(); updateStyles(); "
                action="#{downloadEditController.deleteResource(download)}"
                process="@this" update=":downloads">
            </p:commandButton>
            <p:commandButton value="Cancel" type="button"
                onclick="deletedDlg.hide();" />
        </p:dialog>

If I replace the dialog with this, everything works:

<p:commandButton id="delete" icon="ui-icon-trash" title="Delete" 
action="#{downloadEditController.deleteResource(download)}" 
oncomplete="updateStyles()" update=":downloads" />
Solution

  • Creating a <p:dialog> for every row is not a good idea.

    For starters you had better create a single <p:dialog> outside your <p:dataTable>.

    Next thing that I would do is to set the id or the row var in your bean upon delete button click and in case of confirmation in dialog use that id or the row var from bean to delete.

    This is how your delete button could look like, set the download var in prepareDataForDeletion action and show the dialog...

    <p:commandButton id="deleteConfirmation" icon="ui-icon-trash" title="Delete" 
    action="#{downloadEditController.prepareDataForDeletion(download)}" 
    onsucess="deletedDlg.show();"/>

    Regarding your current anomaly: it's because all your dialogs have the same widgetVar and each next one is overriding the previously declared one all the way until the last one. You could dynamically give them a different widget names like so widgetVar="deleteDlg_#{someIndex}", but this makes no sense if you can have just only one reusable dialog whose content is updated before opening.