Ajax request with JQuery on page unload

JqueryAjax

Jquery Problem Overview


I'm trying to do this:

$(window).unload( function () { 

$.ajax({
	type: "POST",
	url: "http://localhost:8888/test.php?",
	data: "test",
	success: function(msg){
	     alert( "Data Saved: " + msg );
	}
});	
alert (c);
});

However, the success alert is never shown, nor does this request seem to be even hitting the server. What am I doing wrong?

Jquery Solutions


Solution 1 - Jquery

I believe you need to make the request synchronous instead (it's asynchronous by default) using the async : false parameter.

Synchronous requests lock up the browser until they complete. If the request is asynchronous, the page just keeps on unloading. It's quick enough that the request never even has time to fire off.

Solution 2 - Jquery

Try calling it with async = false;

jQuery.ajax({url:"http://localhost:8888/test.php?", async:false})

I just tried it.

Solution 3 - Jquery

The best solution is to use navigator.sendBeacon. It is brand new functionality which is starting to get implemented in new releases of browsers. The function is available in browsers newer than Chrome 39 and Firefox 31. It is not supported by Internet Explorer and Safari at the time of writing. To make sure your request gets send in the browsers that don't support the new functionality yet, you can use this solution:

var navigator.sendBeacon = navigator.sendBeacon || function (url, data) {
  var client = new XMLHttpRequest();
  client.open("POST", url, false); // third parameter indicates sync xhr
  client.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");
  client.send(data);
};

This function does not allow you to register a onsuccess callback though.

Solution 4 - Jquery

The HTML 5 Specification states that alert(), prompt(), etc. will not be available during the window.unload() event. Please see window.unload() for more details. You can check the result by using console.log('success'); instead of alert().

Solution 5 - Jquery

Maybe you'd have more success using the onbeforeunload event instead?

   $(window).bind('beforeunload', ...

Solution 6 - Jquery

Your function and Ajax call look fine, so my guess is that your browser window is closed before ajax call has time to go to the server and back. The ajax call might return something when the window is closing, try adding error function to your ajax call to see if that's the case:

error: function (xhr, textStatus) {
    alert('Server error: '+ textStatus);
}

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionRobView Question on Stackoverflow
Solution 1 - JqueryNate BView Answer on Stackoverflow
Solution 2 - JqueryOrsonView Answer on Stackoverflow
Solution 3 - JquerylswartsenburgView Answer on Stackoverflow
Solution 4 - JqueryJohn YearyView Answer on Stackoverflow
Solution 5 - JqueryScott EverndenView Answer on Stackoverflow
Solution 6 - JqueryMarek KarbarzView Answer on Stackoverflow