CODEWITHSUNDEEP
jsf-2primefaces
wolf97084
wolf97084

Reputation: 280

PrimeFaces dialog framework - closing dialog using remoteCommand, parent method not fired

JSF 2.2; PrimeFaces 5.3

My goal is to capture user closing dialog by clicking X button, go back to parent page so data can be refreshed and update form.

I was able to get p:remoteCommand to call my confirmAndCloseDialog() method in DialogBean, but the onDialogReturn() method in ParentBean is never called. Why is onDialogReturn not called? Any way I can get it to work?

BTW if a user would exit out dialog the normal way, i.e. close the dialog by clicking p:commandButton (CLOSE DIALOG), then everythign is fine.

Here are my codes.

Thank you!

Parent page:

<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>

Dialog page:

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

Upvotes: 0

Views: 2519

Answers (2)

LeGorge
LeGorge

Reputation: 151

4 years later, Primefaces' dialog framework default closable "X" button is still just a link and uses javascript to hide the dialog, that is why the dialogReturn event isn't fired on using said button. I don't know a way to "intercept" its action. So if you don't want to have a custom button closing your dialog, you're out of luck, BUT you can always reinvent the wheel, kind of:

  • Copy Primefaces's button and make it better :)
<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>

You can tweek the position and color to your liking

  • In the dialog bean:
public void close() {
  PrimeFaces.current().dialog().closeDynamic(null);
}
  • Now you can expect the returnDialog event in the parent page and respective bean.
<p:commandButton action="#{parentBean.openDialog(param)}">
  <p:ajax event="dialogReturn" listener="#{parentBean.handleReturn()}"/>
</p:commandButton>
  • Remember to set closable to false when opening the dialog otherwise you will have two "X" buttons:
Map<String,Object> options = new HashMap<String, Object>();
options.put("closable", false);
options.put("draggable", false);
PrimeFaces.current().dialog().openDynamic(
    "dialog",
    options,
    null)

PS: I set draggable to false as well, you can still use draggable mode, but this creates a bar on top of the dialog that's not reachable inside the dialog's page, so your "X" button would be positioned a little more towards the bottom which isn't aesthetically pleasing. Hopefully dragging isn't a must.

Upvotes: 0

VeenarM
VeenarM

Reputation: 1263

Have you setup the Dialog Configurations? As per: 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>

Also - your : should be inside the dialog div/contruction, not inside the button you're selecting.

Upvotes: -1

Related Questions