Javascript: user confirmation when leaving single-page application

3
votes

I would like to make the user confirm that she wants to leave my single-page application. ExtJS 4.1 provides the onWindowUnload in which I would like to plug in a Confirm dialog.

If the user decides to proceed closing the tab/window an Ajax request to the logout URL should tell the server-side that the user has logged out.

Is the above approach possible?

Is it possible to plug the onWindowUnload event in ExtJS MVC controller?

P.S. User leaving single-page app can be any of the following: browser tab close, browser window close, browser back button, browser forward button.

1
javascriptextjsextjs4.1extjs-mvc

1 Answers

3
votes

You need to add a listener to the window's onbeforeunload event.

It is a special type of event handler, and you should read the docs closely.

MDN docs: https://developer.mozilla.org/en/DOM/window.onbeforeunload

MS docs: http://msdn.microsoft.com/en-us/library/ie/ms536907(v=vs.85).aspx

Ext's standard way of attaching event handlers DOES NOT WORK† with this particular event.

You need to use the standard addEventListener or attachEvent methods.

Example:

http://jsfiddle.net/NhLQK/9/

  • Can I use my own dialog? No
  • Can I display my own message in Firefox? No
  • Can I use a confirm()? No
  • Can I make them look the same in different browsers? No

  • Can I fire an AJAX message before the user closes the browser? Yes, if it's synchronous:

    Ext.Ajax.request({ url:'some url', async:false, method:'POST' });

† it seems to work in Chrome with ext 4.1.1