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;}Comments
Client Side Callback Methods for the Page
<FONT COLOR="#000080">/// 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 </FONT><FONT COLOR="#000000">onunloadHandler() [ </FONT><FONT COLOR="#000080">Language </FONT><FONT COLOR="#000000">= javascript ]
{
</FONT><FONT COLOR="#008000">return </FONT><FONT COLOR="#800000">'Are you sure you want to leave?'</FONT><FONT COLOR="#000000">;
}</FONT>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
{
</FONT><FONT COLOR="#000080">XData </FONT><FONT COLOR="#000000">Style
{
<</FONT><FONT COLOR="#000080">style </FONT><FONT COLOR="#800000">type</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"text/css"</FONT><FONT COLOR="#000000">>
</FONT><FONT COLOR="#800000">.</FONT><FONT COLOR="#000080">modalGroupCloseButton </FONT><FONT COLOR="#800000">{
</FONT><FONT COLOR="#000080">background-color</FONT><FONT COLOR="#800000">: </FONT><FONT COLOR="#000080">green</FONT><FONT COLOR="#800000">;
</FONT><FONT COLOR="#000080">filter</FONT><FONT COLOR="#800000">: </FONT><FONT COLOR="#000080">alpha(opacity=</FONT><FONT COLOR="#800000">20);
</FONT><FONT COLOR="#000080">opacity</FONT><FONT COLOR="#800000">: 0.2;
}
.</FONT><FONT COLOR="#000080">modalGroupCloseButtonHover </FONT><FONT COLOR="#800000">{
</FONT><FONT COLOR="#000080">background-color</FONT><FONT COLOR="#800000">: </FONT><FONT COLOR="#000080">green</FONT><FONT COLOR="#800000">;
}
</FONT><FONT COLOR="#000000"></</FONT><FONT COLOR="#000080">style</FONT><FONT COLOR="#000000">>
}
</FONT><FONT COLOR="#000080">XData </FONT><FONT COLOR="#000000">CSS3Style
{
<</FONT><FONT COLOR="#000080">style </FONT><FONT COLOR="#800000">type</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"text/css"</FONT><FONT COLOR="#000000">>
</FONT><FONT COLOR="#800000">.</FONT><FONT COLOR="#000080">modalGroupCloseButton </FONT><FONT COLOR="#800000">{
</FONT><FONT COLOR="#000080">background-color</FONT><FONT COLOR="#800000">: </FONT><FONT COLOR="#000080">red</FONT><FONT COLOR="#800000">;
</FONT><FONT COLOR="#000080">opacity</FONT><FONT COLOR="#800000">: 0.2;
}
.</FONT><FONT COLOR="#000080">modalGroupCloseButtonHover </FONT><FONT COLOR="#800000">{
</FONT><FONT COLOR="#000080">background-color</FONT><FONT COLOR="#800000">: </FONT><FONT COLOR="#000080">red</FONT><FONT COLOR="#800000">;
}
</FONT><FONT COLOR="#000000"></</FONT><FONT COLOR="#000080">style</FONT><FONT COLOR="#000000">>
}
</FONT><FONT COLOR="#000080">XData </FONT><FONT COLOR="#000000">Contents [ </FONT><FONT COLOR="#000080">XMLNamespace </FONT><FONT COLOR="#000000">= </FONT><FONT COLOR="#800080">"http://www.intersystems.com/zen" </FONT><FONT COLOR="#000000">]
{
<</FONT><FONT COLOR="#000080">page </FONT><FONT COLOR="#800000">xmlns</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"http://www.intersystems.com/zen"</FONT><FONT COLOR="#000000">>
<</FONT><FONT COLOR="#000080">button </FONT><FONT COLOR="#800000">caption</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"Show modal" </FONT><FONT COLOR="#800000">onclick</FONT><FONT COLOR="#000000">=</FONT><FONT COLOR="#008000">"zenPage.showModal()"</FONT><FONT COLOR="#000000">/>
</</FONT><FONT COLOR="#000080">page</FONT><FONT COLOR="#000000">>
}
</FONT><FONT COLOR="#000080">ClientMethod </FONT><FONT COLOR="#000000">showModal() [ </FONT><FONT COLOR="#000080">Language </FONT><FONT COLOR="#000000">= javascript ]
{
</FONT><FONT COLOR="#008000">if </FONT><FONT COLOR="#000000">(</FONT><FONT COLOR="#000080">!</FONT><FONT COLOR="#800000">this</FONT><FONT COLOR="#000000">.isPopup) {
zenPage.launchPopupWindow(window.location.href,</FONT><FONT COLOR="#800000">'DEMO MODAL'</FONT><FONT COLOR="#000000">,</FONT><FONT COLOR="#800000">'center=yes,resizable=no,width=320,height=240'</FONT><FONT COLOR="#000000">);
</FONT><FONT COLOR="#008080">var </FONT><FONT COLOR="#000000">els</FONT><FONT COLOR="#000080">=</FONT><FONT COLOR="#000000">document.body.getElementsByClassName(</FONT><FONT COLOR="#800000">'modalGroupClose'</FONT><FONT COLOR="#000000">);
</FONT><FONT COLOR="#008000">if </FONT><FONT COLOR="#000000">(els.length</FONT><FONT COLOR="#000080">>0</FONT><FONT COLOR="#000000">) els[</FONT><FONT COLOR="#000080">0</FONT><FONT COLOR="#000000">].onclick</FONT><FONT COLOR="#000080">=</FONT><FONT COLOR="#000000">zenPage.onhideGroupHandler;
}
}
</FONT><FONT COLOR="#000080">ClientMethod </FONT><FONT COLOR="#000000">onhideGroupHandler() [ </FONT><FONT COLOR="#000080">Language </FONT><FONT COLOR="#000000">= javascript ]
{
</FONT><FONT COLOR="#008000">if </FONT><FONT COLOR="#000000">(confirm(</FONT><FONT COLOR="#800000">'[1] Are you sure you want to leave?'</FONT><FONT COLOR="#000000">)) {
</FONT><FONT COLOR="#008080">var </FONT><FONT COLOR="#000000">modalGroup</FONT><FONT COLOR="#000080">=</FONT><FONT COLOR="#000000">zenPage.modalStack[zenPage.modalStack.length </FONT><FONT COLOR="#000080">- 1</FONT><FONT COLOR="#000000">];
modalGroup.hideGroup();
}
}
</FONT><FONT COLOR="#000080">ClientMethod </FONT><FONT COLOR="#000000">onunloadHandler(</FONT><FONT COLOR="#ff00ff">e</FONT><FONT COLOR="#000000">) [ </FONT><FONT COLOR="#000080">Language </FONT><FONT COLOR="#000000">= javascript ]
{
</FONT><FONT COLOR="#008080">var </FONT><FONT COLOR="#000000">message </FONT><FONT COLOR="#000080">= </FONT><FONT COLOR="#800000">"[2] Are you sure you want to leave?"</FONT><FONT COLOR="#000000">;
</FONT><FONT COLOR="#008000">if </FONT><FONT COLOR="#000000">(</FONT><FONT COLOR="#000080">typeof </FONT><FONT COLOR="#000000">e </FONT><FONT COLOR="#000080">== </FONT><FONT COLOR="#800000">"undefined"</FONT><FONT COLOR="#000000">) {
e </FONT><FONT COLOR="#000080">= </FONT><FONT COLOR="#000000">window.event;
}
</FONT><FONT COLOR="#008000">if </FONT><FONT COLOR="#000000">(e) {
e.returnValue </FONT><FONT COLOR="#000080">= </FONT><FONT COLOR="#000000">message;
}
</FONT><FONT COLOR="#008000">return </FONT><FONT COLOR="#000000">message;
}
</FONT><FONT COLOR="#000080">/// 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 </FONT><FONT COLOR="#000000">%OnUseSoftModals() </FONT><FONT COLOR="#000080">As %Boolean </FONT><FONT COLOR="#000000">[ </FONT><FONT COLOR="#000080">CodeMode </FONT><FONT COLOR="#000000">= expression ]
{
</FONT><FONT COLOR="#0000ff">$$$YES
</FONT><FONT COLOR="#000000">}
</FONT><FONT COLOR="#000080">/// 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 </FONT><FONT COLOR="#000000">%OnDetermineCSSLevel() </FONT><FONT COLOR="#000080">As %Integer </FONT><FONT COLOR="#000000">[ </FONT><FONT COLOR="#000080">CodeMode </FONT><FONT COLOR="#000000">= expression ]
{
3
}
}</FONT>