Cannot enstablish ajax connection onbeforeunload event

Question

I am trying to create a website that has to execute a specific server side task at the time the user exits the web page.

After a lot of research and experimenting what I managed is not working. First, I tried to handle the exit event. I use the "beforeunload" event on jquery to handle it. When the user tries to close or refresh the specific webpage I need to execute some php code.

I need to send a variable (a name) to the php file. There is no response from it. It just executes a task with the name. Here is the code that I tried:

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
    $(window).on("beforeunload", function() {
        $.ajax({
            type: "POST",
            url: "unload.php?name=SOME_VARIABLE",
            success: function(data) {}
    });
});
</script>

The problem is that it is not working. No errors appear on the element inspector. The "unload" php file is working as expected. In fact, when accessed directly through its address, it executes the desired task properly.

I have no previous contact with ajax nor do I master jquery. If there is any better way to achieve this please feel free to tell me.

Thank you in advance.

You have to use `async: false` in AJAX requests sent `onbeforeunload`, otherwise the tab is destroyed before the response can be handled. — Rory McCrossan, Aug 15 '19 at 12:43
Possible duplicate of [window.onbeforeunload ajax request in Chrome](https://stackoverflow.com/questions/4945932/window-onbeforeunload-ajax-request-in-chrome) — Titus, Aug 15 '19 at 12:44
Add `async: false` in your AJAX settings, eg. `type: 'POST', async: false, ...` — Rory McCrossan, Aug 15 '19 at 12:52
Have a look at the beacon API: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/sendBeacon — Morlo Mbakop, Aug 15 '19 at 13:08

Morlo Mbakop · Answer 1 · 2019-08-15T13:20:00.280

1

Try sending a beacon, but it supports is limited see this

window.addEventListener("beforeunload", doSomething, false);

function doSomething() {
  navigator.sendBeacon("unload.php?name=SOME_VARIABLE", data); // modify this to befit your need.
}

edited Aug 15 '19 at 13:20

answered Aug 15 '19 at 12:46

Morlo Mbakop

3,518
20
21

Yeap, indeed, depreciated, I have edited my answer. – Morlo Mbakop Aug 15 '19 at 13:32

score 1 · Accepted Answer · answered Aug 15 '19 at 13:01

You have to use async: false in AJAX requests sent onbeforeunload, otherwise the tab is destroyed before the response can be handled. Try this:

$(window).on("beforeunload", function() {
  $.ajax({
    url: "unload.php?name=SOME_VARIABLE",
    type: "POST",
    async: false,
    success: function(data) {
      // your code here...
    }
  });
});

Note that this is the only situation in which synchronous AJAX requests should ever be used. In all other cases they should be sent asynchronously.

Cannot enstablish ajax connection onbeforeunload event

2 Answers2