JQuery - Обнаружение изменения формы «до» выгрузки формы в Ajax - PullRequest
Новая
       7

JQuery - Обнаружение изменения формы «до» выгрузки формы в Ajax

0 голосов
/ 07 февраля 2012

Я пытаюсь реализовать SPI в одном из моих веб-приложений.В связи с этим я никогда не покидаю главную страницу ( window.onbeforeunload не будет запущен ).

Вот простая структура DOM 

<html>
<head> include jquery and other js css stuff here </head>
<body>
    <div id="menu">Here i do magic to generate a top menu bar</div>
    <div id="content">
      This is the main content area where all the pages get loaded.
    </div>
</body>

В каждом меню нажимаютMenubar в верхней части страницы просто получает новое содержимое страницы, обновленное в div «content» через $.ajax().

Это то, чего я хочу достичь

Скажем,

  1. Пользователь открыл одну страницу с элементами формы.
  2. Пользователь пошел дальше и набрал / выбрал некоторые вещи там.
  3. Теперь пользователь щелкнул какой-то другой пункт меню перед сохранением формы, которая уже загружена.

Можно ли перехватить это событие и предупредить пользователя о потенциально несохраненных данных?Если да, то как?

Я пытался посмотреть Уничтоженное событие .Но уничтоженное событие называется , после элемент (например, форма) удаляется.Я хочу захватить событие до и, возможно, остановить его.

1 Ответ

0 голосов
/ 07 февраля 2012

Можно, возможно, установить переменную или атрибут data-*, когда поле формы сфокусировано: 

$('#formID input').focus(
     function(){
         $(this).closest('form').attr('data-inprogress','true');
         /* or:
         var formInProgress = true;
         */
     });

$('form').submit(
    function(){
        $(this).attr('data-inprogress','false');
        /* or:
        formInProgress = false;
        */
    });

А затем, нажав на элемент, который вызовет изменение страницы илиудаление самого form, проверка атрибута или переменной и, если она существует, подтверждение пользователя, что они хотят отказаться от формы: 

$('.pageChangeElements').click(
    function(){
        if ($('#formID').attr('data-inprogress') == 'true'){
            var c = confirm("Do you really want to discard the form?");

            if (c) {
                // continue
            }
            else {
                return false;
            }
        }
    });

JS Fiddle демонстрация концепции

...