Intercept page exit event

Question

When editing a page within my system  a user might decide to navigate to another website and in doing so could lose all the edits they have not saved   I would like to intercept any attempt to go to another page and prompt the user to be sure they want this to happen since they could potentially lose their current work   Gmail does this in a very similar way   For example  compose a new email  start typing into the message body and enter a new location in the address bar  say twitter com or something    It will prompt asking  Are you sure    Ideas how to replicate this   I m targeting IE8  but would like to be compatible with FF  amp  Chrome also

User · Answer

See this article  The feature you are looking for is the onbeforeunload  sample code      lt script language  JavaScript  gt    window onbeforeunload   confirmExit    function confirmExit           return  You have attempted to leave this page   If you have made any changes to the fields without clicking the Save button  your changes will be lost   Are you sure you want to exit this page         lt  script gt

User · Answer

I have users who have not been completing all required data    lt cfset unloadCheck 0 gt   a ColdFusion precheck in my page generation to see if unload check is needed var erMsg       document  ready function     lt cfif q myData eq    gt       lt cfset unloadCheck 1 gt          myInput   change function            verify      function elsewhere that checks all fields and populates erMsg with error messages for any fail s          if erMsg      window onbeforeunload   null    all OK so let them pass         else window onbeforeunload   confirmExit      borrowed from Jantimon above               lt cfif unloadCheck gt  lt  --- if any are outstanding  set the error message and the unload alert --- gt      verify        window onbeforeunload   confirmExit      function confirmExit    return  Data is incomplete for this Case   erMsg    lt  cfif gt

User · Answer

Instead of an annoying confirmation popup  it would be nice to delay leaving just a bit  matter of milliseconds  to manage successfully posting the unsaved data to the server  which I managed for my site using writing dummy text to the console like this   window onbeforeunload function e        only take action  iterate  if my SCHEDULED REQUEST object contains data           for  var key in SCHEDULED REQUEST          postRequest SCHEDULED REQUEST      post and empty SCHEDULED REQUEST object     for  var i 0 i lt 1000 i              do something unnoticable but time consuming like writing a lot to console       console log  buying some time to finish saving data                break             no return string -- gt  user will leave as normal but data is send to server   Edit  See also Synchronous AJAX and how to do that with jquery

User · Answer

Similar to Ghommey s answer  but this also supports old versions of IE and Firefox   window onbeforeunload   function  e      var message    Your confirmation message goes here      e   e    window event       For IE and Firefox   if  e        e returnValue   message            For Safari   return message

[javascript] Intercept page exit event

Examples related to javascript

Examples related to javascript-events

Examples related to internet-explorer