JSFiddle - React, Tailwind, and code Playground

by jtaylor

HTML

<a href="about:blank">Click to navigate away from this page</a>

JavaScript

// Note:  I came across a couple articles saying we may should to use window.onbeforeunload instead of or in addition to jQuery's unload.  Keep an eye on this.
//        http://vidasp.net/jQuery-unload.html
//        http://stackoverflow.com/questions/1802930/setting-onbeforeunload-on-body-element-in-chrome-and-ie-using-jquery

var doAjaxBeforeUnloadEnabled = true; // We hook into window.onbeforeunload and bind some jQuery events to confirmBeforeUnload.  This variable is used to prevent us from showing both messages during a single event.


var doAjaxBeforeUnload = function (evt) {
    if (!doAjaxBeforeUnloadEnabled) {
        return;
    }
    doAjaxBeforeUnloadEnabled = false;
    jQuery.ajax({
        url: "/",
        success: function (a) {
            console.debug("Ajax call finished");
        },
        async: false /* This is the dangerous part.  Your mileage may vary. */
    });
}

$(document).ready(function () {
    window.onbeforeunload = doAjaxBeforeUnload;
    $(window).unload(doAjaxBeforeUnload);
});