PrimeFaces 对话框框架 - 使用 remoteCommand 关闭对话框，父方法未触发答案

【问题标题】：PrimeFaces dialog framework - closing dialog using remoteCommand, parent method not firedPrimeFaces 对话框框架 - 使用 remoteCommand 关闭对话框，父方法未触发
【发布时间】：2016-10-27 14:02:24
【问题描述】：

JSF 2.2; PrimeFaces 5.3

我的目标是通过单击 X 按钮捕获用户关闭对话框，返回父页面以便刷新数据和更新表单。

我能够让 p:remoteCommand 在 DialogBean 中调用我的 confirmAndCloseDialog() 方法，但从未调用过 ParentBean 中的 onDialogReturn() 方法。为什么不调用 onDialogReturn？有什么办法可以让它工作吗？

顺便说一句，如果用户以正常方式退出对话框，即通过单击 p:commandButton (CLOSE DIALOG) 关闭对话框，那么一切都很好。

这是我的代码。

谢谢！

父页面：

<h:form>
...
    <p:commandButton value="Open dialog" 
                     id="openDialogButton"                                   
                     actionListener="#{parentBean.openDialog()}"
                     update="@form">
        <p:ajax event="dialogReturn"
                listener="#{parentBean.onDialogReturn}"
                update="@form"/>
    </p:commandButton>
...
</h:form>

对话框页面：

<body style="height: 80%;" onunload="userClickOnX();" >
    <h:form id="aForm">
         <p:remoteCommand id="userClickOnX" 
                          name="userClickOnX" 
                          actionListener="#{dailogBean.confirmAndCloseDialog}"/>
       ......
         <p:commandButton id="closeDialog" 
                          value="CLOSE DIALOG" 
                          actionListener="#{dialogBean.confirmAndCloseDialog}"/>
    </h:form>
</body>

父豆

public void openDialog() {
    Map<String, Object> options = new HashMap<>();
    options.put("modal", true);
    options.put("draggable", true);
    options.put("resizable", true);
    options.put("closable", true);
    options.put("contentWidth", "100%");
    options.put("contentHeight", "100%");
    options.put("width", 1000);
    options.put("height", 800);
    RequestContext.getCurrentInstance().openDialog("dialog", options, null);
}

public void onDialogReturn(SelectEvent event) {
   refresh data ....
}

DialogBean：

public void confirmAndCloseDialog() {
    RequestContext.getCurrentInstance().closeDialog(objectForParent);
}

【问题讨论】：

标签： jsf-2 primefaces

【解决方案1】：

4 年后，Primefaces 的对话框框架默认可关闭“X”按钮仍然只是一个链接，并使用 javascript 隐藏对话框，这就是为什么在使用该按钮时不会触发 dialogReturn 事件的原因。我不知道如何“拦截”它的行为。因此，如果您不想让自定义按钮关闭您的对话框，那么您就不走运了，但是您总是可以重新发明轮子，有点：

复制 Primefaces 的按钮，让它变得更好:)

<h:body>
  <h:form id="formToolbar">
    <a class="ui-dialog-titlebar-icon ui-dialog-titlebar-close ui-corner-all" href="#" 
        role="button"
        style="float: right; position: relative; top: -10px; left: -3px; color: #757575;" 
        onclick="close()">
      <span class="ui-icon ui-icon-closethick"></span>
    </a>
    <p:remoteCommand id="close" name="close" action="#{dialogController.close()}"> 
    </p:remoteCommand>
  </h:form>
  ...
<h:body>

您可以根据自己的喜好调整位置和颜色

在对话框 bean 中：

public void close() {
  PrimeFaces.current().dialog().closeDynamic(null);
}

现在您可以在父页面和相应的 bean 中期待 returnDialog 事件。

<p:commandButton action="#{parentBean.openDialog(param)}">
  <p:ajax event="dialogReturn" listener="#{parentBean.handleReturn()}"/>
</p:commandButton>

记得在打开对话框时将 closable 设置为 false，否则您将有两个“X”按钮：

Map<String,Object> options = new HashMap<String, Object>();
options.put("closable", false);
options.put("draggable", false);
PrimeFaces.current().dialog().openDynamic(
    "dialog",
    options,
    null)

PS：我也将 draggable 设置为 false，您仍然可以使用 draggable 模式，但这会在对话框顶部创建一个在对话框页面内无法访问的栏，因此您的“X”按钮会定位更多朝向底部，这在美学上并不令人愉悦。希望拖动不是必须的。

【讨论】：

“我不知道如何“拦截”它的动作。” 如果你愿意，可以通过 javascript 事件处理程序使用 jquery 来实现

【解决方案2】：

您是否设置了对话框配置？根据：http://www.primefaces.org/docs/guide/primefaces_user_guide_5_3.pdf faces-config.xml

<application>
 <action-listener>
org.primefaces.application.DialogActionListener
 </action-listener>
 <navigation-handler>
org.primefaces.application.DialogNavigationHandler
 </navigation-handler>
 <view-handler>
org.primefaces.application.DialogViewHandler
 </view-handler>
</application>

还有 - 你的：应该在对话框 div/contruction 内，而不是在您选择的按钮内。

【讨论】：

我的 faces-config.xml 中确实有这些 primefaces 设置。如果用户单击命令按钮关闭对话框，它将返回父级没有问题。但是当remoteCommand触发confirmAndCloseDialog()时，它并没有返回父级。 “你的 : 应该在对话框 div/contruction 内，而不是在你选择的按钮内”是什么意思，我的表单？
抱歉 p:ajax.. 不知道为什么它没有出来
我不确定。在 PrimeFaces 的展示中，p:ajax 位于 commandButton 内。见primefaces.org/showcase/ui/df/data.xhtml 但我会试一试！