Send an Ajax Call on beforeunload/unload

Question

Scenario: I am creating an event registration module in which a user would choose a date from a calendar for booking, fill some input fields and pay up to book the date. One of the requirements is that, there can be only one booking per date. This arises a case where two people want to book the same date on the same time. So, we need to show the user who came later to book the date a message that a booking is already in progress for that specific date. Please check back later.

For this to achieve, I am creating a temporary entry in my DB whenever a user chooses a date. Against that entry, I can show the message to the other user who came later.

Logically, that entry has to be deleted if the first user:

1. selects some other date.
2. closes his browser or navigate away from the page

So that it would be available for the second user who wants to book for the same date.

The Problem: I am able to delete the entry once a user changes his selected date. I am not able to achieve the second one. I wrote a function that will delete the row and calling that function onbeforeunload jQuery event. Apparently, that function is not working with jQuery.

window.onbeforeunload = function(){
  deleteTempEntry(); //This sends an ajax call to delete the entry. Not working.

  alert("The second alert"); // even this alert doesn't work.

  // I actually intend to use confirm box to make sure to not to delete the entry if the user does not leave the page.
  confirm("Your current progress will be removed. Are you sure?"); 

  //Calling this return function shows the warning message but none of the other code works.
  //return 'Are you sure you want to leave?';
};

I tried, bind/on/pure JS but none of those seem to work.

As explained here, there isn't really much I can do with onbeforeunload/unload events because of the security reasons. Any workaround for this?

Thanks.

Answer 1

I needed something like that. But unfortunately calling the backend in onBeforenUnload is not reliable. Most AJAX calls will not reach the backend (some may); The only guaranteed call is with navigator.sendBeacon(url, data). It sends POST request even the browser is closed.

Answer 2

You can post data with async: false like this:

$(window).unload(function () {
            $.ajax({
                type: 'POST',
                async: false,
                url: 'your url',
                data: {  }
            });
        });

Answer 3

Try console.log and return in your onbeforeunload method. maybe user leaves the page before your ajax goes through.

See: https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload

Since 25 May 2011, the HTML5 specification states that calls to

• window.alert()
• window.confirm()
• window.prompt()

commands may be ignored during this event.

Answer 4

You can make the client send out a "heartbeat" every 30 seconds or so to the server, and update a record in the database with a timestamp of the last sent heartbeat along with a reference to the booking date. Then run a cronjob which runs every minute or so, which checks all of those records, and if one of them is over let's say over 120 seconds old, then delete the record.