Trigger an event when user navigates away

Question

I need to call a JavaScript/jQuery function which has a few lines of code in it, on a PHP page when the user closes his window/tab or navigates away by clicking a link. I've tried the onbeforeunload function but only the return "blah blah blah;" part executes and everything else is ignored. I've also tried the .unload method from jQuery but for some reason this code doesn't run.

$(window).unload(function() {     alert('blah blah blah'); }); 

Please suggest alternatives. Thanks..

Answer 1

Here is a simple working example. Whatever you return from the unload callback will be displayed in a browser popup confirmation.

Working example sending Ajax request before unload http://jsfiddle.net/alexflav23/hujQs/7/

The easiest way to do this:

window.onbeforeunload = function(event) {     // do stuff here     return "you have unsaved changes. Are you sure you want to navigate away?"; }; 

in jQuery:

$(window).on("beforeunload", function() {     $.ajax("someURL", {         async: false,         data: "test",         success: function(event) {              console.log("Ajax request executed");         }     });     return "This is a jQuery version"; }); 

Look into the Network tab of the browser. You will see how the request is being sent as you wanted to do. Just send the appropriate data.

Bear in mind all operations triggered must be synchronous, so you can only make synchronous ajax requests for instance. However, the above is not entirely reliable for any purpose.

Opt for periodic back-up of user data to localStorage and sync with the server automatically . Keep window.onbeforeunload just as an extra precaution, but not as a main mechanism. It's well known to cause problems.