Window.unload launches post after unloading

Question

I try to make a message on the server before the page is uploaded, and I followed this up and it works fine. My problem is $ .post on window.unload starts after it is unloaded. I tried this with a link to the sign and checked my logs, I get the following:

Started GET "/signout" for 127.0.0.1 at 2012-11-22 00:15:08 +0800 Processing by SessionsController#destroy as HTML Redirected to http://localhost:3000/ Completed 302 Found in 1ms Started GET "/" for 127.0.0.1 at 2012-11-22 00:15:08 +0800 Processing by HomeController#index as HTML Rendered home/index.html.erb within layouts/application (0.4ms) Rendered layouts/_messages.html.erb (0.1ms) Completed 200 OK in 13ms (Views: 12.9ms) Started POST "/unloading" for 127.0.0.1 at 2012-11-22 00:15:08 +0800 Processing by HomeController#unloading as */* Parameters: {"p1"=>"1"} WARNING: Can't verify CSRF token authenticity Completed 500 Internal Server Error in 0ms NoMethodError (undefined method `id' for nil:NilClass): app/controllers/home_controller.rb:43:in `unloading' 

The first part is the output, and then the user is redirected to root , then the post starts ('/ unloading').

Is there a way to make '/ unloading' execute first and then execute everything that has been unloaded?

I have it as my jquery post

 $(window).unload -> $.ajax { async: false, beforeSend: (xhr) -> xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content')) , url: '/unloading' , type: 'Post' , data: { p1: '1' } } 

Update

So, I passed an ajax request to beforeunload, and it worked, but I had to do return null to remove the dialog box, because if I do not, ajax still launches the popup dialog box (even without answering yes / no, I want to leave this page "). Result:

 window.onbeforeunload -> $.ajax { async: false, beforeSend: (xhr) -> xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content')) , url: '/unloading' , type: 'Post' , data: { p1: '1' } } return null 

Also, I only tried this with Chrome at the moment, and it works as expected. However, try other browsers.

Answer 1

Try the beforeUnload event

The exact handling of the unload event varied from version to version of browsers. For example, some versions of Firefox fire an event when a link is executed, but not when the window is closed. In practical use, the behavior should be tested on all supported browsers, and is different from the proprietary beforeunload event.

• https://developer.mozilla.org/en-US/docs/DOM/window.onbeforeunload

UPDATE

The unload event is fired when the page is unloaded.

• https://developer.mozilla.org/en-US/docs/DOM/XMLHttpRequest/Synchronous_and_Asynchronous_Requests#XMLHttpRequests_being_stopped

UPDATE 2

To disable the popup Are you sure that you want to leave this page? return null from beforeUnload callback function

• How do I show “Are you sure you want to go from this page?” When did the change happen?

UPDATE 3

Check this out for cross-browser compatibility.

• http://jonathonhill.net/2011-03-04/catching-the-javascript-beforeunload-event-the-cross-browser-way/

Answer 2

As @NickKnudson suggested, use the "beforeUnload" event to send back form data before the window is unloaded:

 window.onbeforeunload = function() { $.ajax { async: false, beforeSend: (xhr) -> xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content')) , url: '/unloading' , type: 'Post' , data: { p1: '1' } } } 

At the same time, about two weeks ago, switching to beforeUnload solved the problem.

Answer 3

The problem is that the window unload does not wait for the AJAX calls (which are asynchronous) to complete before the window closes. Additionally, jQuery does not seem to have built-in handling of the beforeunload event, so you will need to revert to the original JS code to handle this. See below:

( Note : written in CoffeeScript)

 window.onbeforeunload = function() { $.ajax { async: false, // Important - this makes this a blocking call beforeSend: (xhr) -> xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content')) , url: '/unloading' , type: 'Post' , data: { p1: '1' } } }; 

onbeforeunload - an event that fires before the unload event when the page is unloaded.

Also see this Google forum about this topic.