Question

JSF 2.2; PrimeFaces 5.3

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

我能够让p：remoteCommand在DialogBean中调用我的confirmAndCloseDialog（）方法，但是从不调用ParentBean中的onDialogReturn（）方法。为什么没有调用onDialogReturn？我能以任何方式让它发挥作用吗？

BTW如果用户以正常方式退出对话框，即通过单击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>

ParentBean

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);
}

Answer 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”按钮的位置会更多一些朝向底部，这在美学上并不令人满意。希望拖动不是必须的。

Answer 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内，而不是在你选择的按钮内。

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

2 个答案: