New post
Question
· Oct 5, 2017

Message when closing window

#ZEN #Caché

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;
}
Discussion (5)0
Log in or sign up to continue
Vitaliy Serdtsev · Oct 5, 2017

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?';
}
0 0
Vitaliy Serdtsev Oct 5, 2017 to Ruslan K

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

0 0
Vitaliy Serdtsev Oct 6, 2017 to Ruslan K

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-color: green;
  filter: alpha(opacity=20);
  opacity: 0.2;
}
.modalGroupCloseButtonHover {
  background-color: green;
}
</style>
}

XData CSS3Style
{
<style type="text/css">
.modalGroupCloseButton {
  background-color: red;
  opacity: 0.2;
}
.modalGroupCloseButtonHover {
  background-color: red;
}
</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 e == "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
}

}
0 0