Primefaces: commandButton in confirmDialog cannot update datatable in the same form

Question

I have 1 datatable which includes Edit and Delete command buttons in each row. Delete button shows a confirm dialog onclick, and by actionListener, sets the currentObject variable to the object that it belongs to in the same row.

In the confirm dialog, Yes is also a command button, and it calls delete(object) method of the bean.

Everything works fine. Delete function is below:

    public void delete(ActionEvent actionEvent) {
    categoryRepository.delete(currentCategory);
    currentCategory = new Category();
    categoryList = categoryRepository.findAll();
}

I want to update the datatable after delete. But update does not work for datatable. I can only update @form, but this time, everything in the page becomes disable, and I cannot select anything. Can be a bug.

Here is the xhtml code:

    <h:form id="categoryForm">
                <p:commandButton id="addCategoryButton" value="New"
                    onclick="categoryDialog.show();" type="button" />

                <p:dataTable var="cat" value="#{categoryBean.categoryList}"
                    rowKey="#{cat.id}" paginator="true" rows="10"
                    selection="#{categoryBean.selectedCategories}" id="categoryTable"
                    widgetVar="categoryTable">

                    <f:facet name="header">
        Category List
    </f:facet>
                    <p:column selectionMode="multiple" />
                    <p:column headerText="Name" sortBy="#{cat.name}"
                        filterBy="#{cat.name}" id="name">
                     #{cat.name[categoryBean.currentLocale.language]}
                    </p:column>
                    <p:column headerText="Sort Order" sortBy="#{cat.sortOrder}"
                        filterBy="#{cat.sortOrder}" id="sortOrder">
                        #{cat.sortOrder}
                    </p:column>
                    <p:column headerText="Actions" id="actions">
                        <h:commandButton action="#{categoryBean.edit(cat)}" value="Edit" />

                        <h:commandButton value="Delete"
                            onclick="deleteConfirmation.show()" type="button">
                            <f:setPropertyActionListener value="#{cat}"
                                target="#{categoryBean.currentCategory}" />
                        </h:commandButton>

                    </p:column>

                </p:dataTable>
                <p:confirmDialog id="deleteConfirmDialog" message="Are you sure?"
                    header="Initiating destroy process" severity="alert"
                    widgetVar="deleteConfirmation">

                    <p:commandButton id="confirm" value="Yes Sure"
                        update=":categoryForm:categoryTable"
                        oncomplete="deleteConfirmation.hide()"
                        actionListener="#{categoryBean.delete}" />
                    <p:commandButton id="decline" value="Not Yet"
                        onclick="deleteConfirmation.hide()" type="button" />
                </p:confirmDialog>

                <p:dialog id="categoryDialog" header="Category Detail"
                    widgetVar="categoryDialog" resizable="false" style="width:90%;"
                    showEffect="explode" hideEffect="explode">
                    <p:panel id="panel" header="Edit Category"
                        style="margin-bottom:10px;">
                        <p:messages id="messages" />
                        <h:panelGrid columns="3">
                            <h:outputLabel for="nameTabView" value="Name: " />
                            <p:tabView id="nameTabView">
                                <c:forEach var="locale" items="#{categoryBean.userLocales}">
                                    <p:tab title="#{locale.displayLanguage}">
                                        <h:panelGrid columns="2" cellpadding="10">
                                            <h:inputText
                                                value="#{categoryBean.currentCategory.name[locale.language]}" />
                                        </h:panelGrid>
                                    </p:tab>
                                </c:forEach>
                            </p:tabView>
                        </h:panelGrid>
                        <p:commandButton id="saveCategoryButton" value="Save"
                            oncomplete="categoryDialog.hide()"
                            actionListener="#{categoryBean.save}"
                            update="categoryTable, categoryDialog" />
                    </p:panel>

                </p:dialog>
            </h:form>

Please show the facelet code. – Matt Handy Feb 13 '12 at 08:00 — Matt Handy, Feb 13 '12 at 08:00

score 0 · Answer 1 · answered Feb 13 '12 at 10:21

this seems to be an issue with updating the DOM after the AJAX request. I cannot tell for sure, since you did not provide the page markup, but I guess it's for the following reason:

When you want parts of the page to be updated, after the ajax call has been completed, you need to provide the ID of the component to update as value to the update attribute of the command button / command link. I guess this is what you did.

The problem is, that you may only provide the server side ID of the component to update, if it is within the same naming container as the component which triggered the request. You can try using the following ID in order to update the table <p:commandButton action="xxx" update=":myForm:myTable" /> in order to have the table with the ID "myTable" within the form with the ID "myForm" getting updated.

The OP mentioned that `@form` did update the table, so the table is *definitely* inside the same form as the button. — BalusC, Feb 13 '12 at 12:26
@BalusC - You are correct. Without the facelet code given, we can hardly tell what the issue is... and to be honest I did overlook the "becomes disable" part and thought OP wanted to update only the table and not the whole form. My fault :) Let's wait for the facelet code. — Tim Brückner, Feb 13 '12 at 13:18

score 0 · Accepted Answer · answered Feb 13 '12 at 23:11

I made a big mistake. I used tag. I should use for primefaces.

                <h:form id="categoryForm">
                <p:commandButton id="addCategoryButton" value="New"
                    onclick="categoryDialog.show();" type="button" />

                <p:dataTable var="cat" value="#{categoryBean.categoryList}"
                    rowKey="#{cat.id}" paginator="true" rows="10"
                    selection="#{categoryBean.selectedCategories}" id="categoryTable"
                    widgetVar="categoryTable">

                    <f:facet name="header">
        Category List
    </f:facet>
                    <p:column selectionMode="multiple" />
                    <p:column headerText="Name" sortBy="#{cat.name}"
                        filterBy="#{cat.name}" id="name">
                     #{cat.name[categoryBean.currentLocale.language]}
                    </p:column>
                    <p:column headerText="Sort Order" sortBy="#{cat.sortOrder}"
                        filterBy="#{cat.sortOrder}" id="sortOrder">
                        #{cat.sortOrder}
                    </p:column>
                    <p:column headerText="Actions" id="actions">
                        <p:panelGrid columns="2" styleClass="actions" cellpadding="2">
                            <p:commandButton action="#{categoryBean.edit(cat)}" value="Edit" />
                            <p:commandButton value="Delete"
                                onclick="deleteConfirmation.show()">
                                <f:setPropertyActionListener value="#{cat}"
                                    target="#{categoryBean.currentCategory}" />
                            </p:commandButton>
                        </p:panelGrid>
                    </p:column>

                </p:dataTable>
                <p:confirmDialog id="deleteConfirmDialog" message="Are you sure?"
                    header="Initiating destroy process" severity="alert"
                    widgetVar="deleteConfirmation">

                    <p:commandButton id="confirm" value="Yes Sure"
                        update=":categoryForm:categoryTable"
                        oncomplete="deleteConfirmation.hide()"
                        actionListener="#{categoryBean.delete}" />
                    <p:commandButton id="decline" value="Not Yet"
                        onclick="deleteConfirmation.hide()" type="button" />
                </p:confirmDialog>

                <p:dialog id="categoryDialog" header="Category Detail"
                    widgetVar="categoryDialog" resizable="false" style="width:90%;"
                    showEffect="explode" hideEffect="explode">
                    <p:panel id="panel" header="Edit Category"
                        style="margin-bottom:10px;">
                        <p:messages id="messages" />
                        <h:panelGrid columns="3">
                            <h:outputLabel for="nameTabView" value="Name: " />
                            <p:tabView id="nameTabView">
                                <c:forEach var="locale" items="#{categoryBean.userLocales}">
                                    <p:tab title="#{locale.displayLanguage}">
                                        <h:panelGrid columns="2" cellpadding="10">
                                            <h:inputText
                                                value="#{categoryBean.currentCategory.name[locale.language]}" />
                                        </h:panelGrid>
                                    </p:tab>
                                </c:forEach>
                            </p:tabView>
                        </h:panelGrid>
                        <p:commandButton id="saveCategoryButton" value="Save"
                            oncomplete="categoryDialog.hide()"
                            actionListener="#{categoryBean.save}"
                            update="categoryTable, categoryDialog" />
                    </p:panel>

                </p:dialog>
            </h:form>

Thank you for your help

Primefaces: commandButton in confirmDialog cannot update datatable in the same form

2 Answers2

Linked