Primefaces:confirmDialog中的commandButton无法以相同的形式更新数据表
我有 1 个数据表,其中每行都包含编辑和删除命令按钮。单击“删除”按钮会显示一个确认对话框,并通过 actionListener 将 currentObject 变量设置为其所属同一行中的对象。
在确认对话框中,Yes也是一个命令按钮,它调用bean的delete(object)方法。
一切正常。删除功能如下:
public void delete(ActionEvent actionEvent) {
categoryRepository.delete(currentCategory);
currentCategory = new Category();
categoryList = categoryRepository.findAll();
}
我想在删除后更新数据表。但更新不适用于数据表。我只能更新@form,但这一次,页面中的所有内容都变为禁用,我无法选择任何内容。可能是一个错误。
这是xhtml代码:
<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>
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>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
这似乎是 AJAX 请求后更新 DOM 的问题。我不能确定,因为你没有提供页面标记,但我猜这是出于以下原因:
当你想要更新页面的某些部分时,在ajax调用完成后,你需要提供的ID要更新为命令按钮/命令链接的
update
属性值的组件。我想这就是你所做的。问题是,您只能提供要更新的组件的服务器端 ID(如果该组件与触发请求的组件位于同一命名容器内)。您可以尝试使用以下 ID 来更新表
以便拥有具有该 ID 的表ID“myForm”的表单中的“myTable”正在更新。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.我犯了一个大错误。我用了标签。我应该用于primefaces。
感谢您的帮助
I made a big mistake. I used tag. I should use for primefaces.
Thank you for your help