Javascript 关闭对话框时刷新datatable,无需单击按钮
我有一个对话框:Javascript 关闭对话框时刷新datatable,无需单击按钮,javascript,dialog,datatable,primefaces,refresh,Javascript,Dialog,Datatable,Primefaces,Refresh,我有一个对话框: <p:dialog header="Commande editée le #{acceuilUserController.selectedMajCommande.dateMaj} par l'#{acceuilUserController.selectedMajCommande.utilisateur.type} #{acceuilUserController.selectedMajCommande.utilisateur.nom} #{acceuilUserContr
<p:dialog header="Commande editée le #{acceuilUserController.selectedMajCommande.dateMaj} par l'#{acceuilUserController.selectedMajCommande.utilisateur.type} #{acceuilUserController.selectedMajCommande.utilisateur.nom} #{acceuilUserController.selectedMajCommande.utilisateur.prenom}" widgetVar="carDialog" resizable="false" id="carDlg"
update="cars" showEffect="fade" hideEffect="explode" modal="true">
它允许将数据刷新到datatable中,我通过对话框中的一个按钮成功地做到了这一点,如下所示:
<p:commandButton id="confirm" value="fermer" update="cars" oncomplete="carDialog.hide()"
action="#{acceuilUserController.refresh()}" />
但我只想在关闭对话框时执行此操作,而不需要在对话框中使用此按钮
以下是我要刷新的数据表:
<p:dataTable id="cars" var="car" value="#{acceuilUserController.lc_maj}" tableStyle="width:auto" rowStyleClass="#{(car.lu == false) ? 'red' : null}" >
<p:column headerText="Commande N° : " style="width:100px">
<h:outputText value="#{car.commande.id}" />
</p:column>
<p:column headerText="Date de mise à jour : " style="width:100px">
<h:outputText value="#{car.dateMaj}" />
</p:column>
<p:column headerText="Decision : " style="width:100px">
<h:outputText value="#{car.decison}" />
</p:column>
<p:column headerText="Etat : " style="width:100px">
<h:outputText value="#{car.etat}" />
</p:column>
<p:column style="width:40px">
<p:commandButton id="selectButton" action="#{acceuilUserController.refresh()}" update=":form:carDlg" oncomplete="carDialog.show()" icon="ui-icon-search" title="plus de détails">
<f:setPropertyActionListener value="#{car}" target="#{acceuilUserController.selectedMajCommande}" />
</p:commandButton>
</p:column>
</p:dataTable>
如何实现这一点,请提前感谢这可以通过使用jQuery绑定单击事件来实现,其方式是调用PrimeFaces commandButton组件的单击事件,该组件已配置为部分处理和更新您选择的组件。我做了类似的事情,将这个脚本放在一个复合组件中,我将它放在所有对话框之外,但当然有很多方法可以做到这一点
jQuery(document).ready(function() {
// Searching for naming container that contains my dialog...
var dashboardPanel = jQuery('*[id*=#{cc.attrs.id}]');
// Find the dialog closer button by its unique class
var closerButton = dashboardPanel.children().find('.ui-dialog-titlebar-close');
closerButtons.bind('click', function(event) {
// Use set timeout to delay the event if you want to see close animation effect
setTimeout(function() { //Some logic to find the button client id
var menuItemId = 'view#{cc.attrs.id}'.replace('Panel', '');
jQuery('#' + menuItemId).click();
}, 400);
});
});
当然,如果您没有带有动态id的commandButton,或者它不在重复容器中,那么通过它的widgetVar在Javascript中直接引用它会简单得多
您应该像这样更新RequestContext:
public void update() {
RequestContext requestContext = RequestContext.getCurrentInstance();
requestContext.update("form:cars");
}
对话框没有更新属性。除此之外,PrimeFaces更新组件的方法是在表单中使用p:ajax来触发服务器端数据的更改。请向我们展示该组件。现在您添加了一些与问题无关的列。我们需要了解是什么事件触发了数据的变化。否则刷新的原因是什么?这不是一个完整的解决方案,但您可以在对话框中的关闭命令按钮中添加一个f:ajax单击事件:并更改acceuilUserController.refreshActionEvent事件。我通过添加以下行来执行您所说的所有操作:因为event='click'不受支持,但它生成了以下错误:listener={acceuilUserController.refresh}:方法refresh未找到javax.el.MethodNotFoundException:/vues_-Usilisateur/acceuil.xhtml@51124 listener={acceuilUserController.refresh}:方法refresh未找到抱歉,它可以工作,问题是我在RequestScope中有managedBean,但现在我使用ViewScope创建了它,谢谢
jQuery(document).ready(function() {
// Searching for naming container that contains my dialog...
var dashboardPanel = jQuery('*[id*=#{cc.attrs.id}]');
// Find the dialog closer button by its unique class
var closerButton = dashboardPanel.children().find('.ui-dialog-titlebar-close');
closerButtons.bind('click', function(event) {
// Use set timeout to delay the event if you want to see close animation effect
setTimeout(function() { //Some logic to find the button client id
var menuItemId = 'view#{cc.attrs.id}'.replace('Panel', '');
jQuery('#' + menuItemId).click();
}, 400);
});
});
commandButtonWidget.jq.click();
public void update() {
RequestContext requestContext = RequestContext.getCurrentInstance();
requestContext.update("form:cars");
}