Question
Ruslan K · Oct 5, 2017

Message when closing window

How to show alert message on ZEN when user closing window?

Standart js way to add listener is not working.

I tried this

ClientMethod onloadHandler() [ Language = javascript ]
{

zenPage.window.addEventListener('onbeforeunload', function(e){
   
        return 'Are you sure you want to leave?';
});
    
}

and this, but both are unsuccessfully .

ClientMethod onloadHandler() [ Language = javascript ]
{
    
    
   zenPage.window.onbeforeunload zenPage.myClientMethod;
}

00
1 0 5 450
Log in or sign up to continue

Replies

Client Side Callback Methods for the Page

///  This client event, if present, is fired when the page is unloaded.
///  If this method returns a string value, then that is used as the
///  return value of the HTML page's onbeforeunload handler (if more than
///  one component returns a string, the first one encountered is used).
ClientMethod onunloadHandler() [ Language = javascript ]
{
  return 'Are you sure you want to leave?';
}

I don't know why, but it is not working for me. 

Did you try this callback and it was working?

Yes, checked and it works in IE11 (see screenshot).
In addition, you can find in the file zenutils.js the following code:

if (zenIsIE && (!(((typeof zenIsHTML5 != 'undefined'&& zenIsHTML5) && ((typeof document.documentMode != 'undefined'&& document.documentMode==9)))) {
  <...>
  window.document.body.onload function(event) { return zenPageEventHandler('onload',event); }
  window.document.body.onbeforeunload function(event) { return zenPageEventHandler('onunload',event); }
  <...>
}

Googling "onbeforeunload не работает" or "onbeforeunload javascript not working".

I found what is the problem.

When I have opened new window through zenPage.launchPopupWindow - it is not working ( method onunloadHandler()).

But when I have used zenPage.window.open, method onunloadHandler() works very well.

It also can be solved.

The behavior of zenPage.launchPopupWindow depends on the setting useSoftModal.

Play around with %OnUseSoftModals in the following example:

Class dc.demo Extends %ZEN.Component.page
{

XData Style
{
<style type="text/css">
.modalGroupCloseButton {
  background-colorgreen;
  filteralpha(opacity=20);
  opacity: 0.2;
}
.modalGroupCloseButtonHover {
  background-colorgreen;
}
</style>
}

XData CSS3Style
{
<style type="text/css">
.modalGroupCloseButton {
  background-colorred;
  opacity: 0.2;
}
.modalGroupCloseButtonHover {
  background-colorred;
}
</style>
}

XData Contents [ XMLNamespace "http://www.intersystems.com/zen" ]
{
<page xmlns="http://www.intersystems.com/zen">
<button caption="Show modal" onclick="zenPage.showModal()"/>
</page>
}

ClientMethod showModal() [ Language = javascript ]
{
  if (!this.isPopup) {
    zenPage.launchPopupWindow(window.location.href,'DEMO MODAL','center=yes,resizable=no,width=320,height=240');
    
    var els=document.body.getElementsByClassName('modalGroupClose');
    if (els.length>0) els[0].onclick=zenPage.onhideGroupHandler;
  }
}

ClientMethod onhideGroupHandler() [ Language = javascript ]
{
  if (confirm('[1] Are you sure you want to leave?')) {
    var modalGroup=zenPage.modalStack[zenPage.modalStack.length - 1];
    modalGroup.hideGroup();
  }
}

ClientMethod onunloadHandler(e) [ Language = javascript ]
{
  var message "[2] Are you sure you want to leave?";

  if (typeof == "undefined") {
      e window.event;
  }
  if (e) {
      e.returnValue message;
  }
  return message;
}

/// Return whether the current page should use soft modal divs.
/// The default behaviour is to return 1 for the current instance, but users may set the
/// ^%ISC.ZEN.useSoftModals global change this system-wide.
/// In some cases, it may be worth modifying the value of the flag based on
/// the user agent, particularly if users are expected to access the application
/// from mobile devices where new windows behave differently.
ClassMethod %OnUseSoftModals() As %Boolean CodeMode = expression ]
{
$$$YES
}

/// This callback method determines lets a page specify level of CSS support is used by this page.
/// The default is to return "", which indicates that the built-in ZEN CSS level
/// detection is used. A page can override this and return 2 or 3.
Method %OnDetermineCSSLevel() As %Integer CodeMode = expression ]
{
3
}

}