Вызовите Ajax при выгрузке, если пользователь нажмет «ОК»

Question

Я проектирую довольно длинную форму, которая будет автоматически сохранять каждые пару минут (то есть, используя Ajax, данные формы будут вставлены или обновлены в базе данных MySQL).Однако, если пользователь решает выйти из страницы перед отправкой формы, я хочу убедиться, что я удалил строку, которая была вставлена ​​в базу данных.Это легко сделать, если пользователь просто нажимает другую ссылку или кнопку «Отмена» формы.Но я обеспокоен тем, что происходит, когда пользователь: 1) закрывает страницу, 2) перезагружает страницу или 3) нажимает кнопку браузера назад (или вперед).Я знаю, как использовать событие unload для создания диалогового окна подтверждения, в котором пользователь должен подтвердить, что он хочет покинуть страницу.Но я не знаю, как сделать Ajax-вызов (чтобы удалить эту строку из базы данных), если пользователь нажимает кнопку ОК («Нажмите OK, чтобы продолжить»).Можно ли вызвать функцию, если пользователь нажимает кнопку ОК во время события выгрузки?

window.onbeforeunload = function() {
    if ($('#changes_made').val() == 'yes') //if user (partially) filled out the form
        {
            return "Are you sure?"
            if (/*user clicks OK */)  //What should the if statement evaluate here?
            {
                //make Ajax call
            }
        }
};

Answer 1

$(document).ready(function() {   
    $(':input',document.myForm).bind("change", function() { 
       setConfirmUnload(true); 
    }); // Prevent accidental navigation away
});

function setConfirmUnload(on) {
     // To avoid IE7 and prior jQuery version issues   
     // we are directly using window.onbeforeunload event
     window.onbeforeunload = (on) ? unloadMessage : null;
}

function unloadMessage() {

    if(Confirm('You have entered new data on this page.  If you navigate away from this page without first saving your data, the changes will be lost.')) {

            $.ajax({
               type: "POST",
               url: "some.php",
               data: "name=John&location=Boston",
               success: function(msg){
                 alert( "Data Saved: " + msg );
               }
             });

    }

}

Убедитесь, что вы обновили версию jQuery. В jQuery версии 1.3.2 была ошибка:

Билет № 4418: до выгрузки не работает правильно

Или используйте встроенную функцию:

window.onbeforeunload = function() {....}