Как обнаружить несохраненные данные в форме, когда пользователь покидает страницу?

Question

Мне нужно обнаружить несохраненные данные в форме, когда пользователь покидает страницу без отправки формы. Я хотел бы реализовать это без добавления слушателя изменения значения для каждого входа.

Это функциональное требование:

«Пользователь открывает страницу, затем нажимает на любую ссылку, если значения на странице изменили всплывающее сообщение с предупреждением, чтобы уведомить пользователя, что ему нужно сохранить измененные данные, но если ничего не изменилось, система продолжит работу без уведомления пользователя».

Я пытался сравнить метод массива, чтобы сравнить DTO для DB и связанного DTO, но это доставляет мне много проблем с длиной массива и байтовым сравнением.

Answer 1

Обычно это реализуется на стороне клиента с помощью JavaScript, потому что невозможно перехватить событие beforeunload со стороны сервера, когда конечный пользователь покидает страницу.

Вот конкретный пример с помощью библиотеки JavaScript jQuery (в противном случае вы получите в 10 раз больше кода, чтобы обеспечить его совместимость с кроссбраузером и беспроблемную совместную работу с рендерингами ajax):

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
    $(function() {
        // Set the unload message whenever any input element get changed.
        $(':input').on('change', function() {
            setConfirmUnload(true);
        });

        // Turn off the unload message whenever a form get submitted properly.
        $('form').on('submit', function() {
            setConfirmUnload(false);
        });
    });

    function setConfirmUnload(on) {
        var message = "You have unsaved data. Are you sure to leave the page?";
        window.onbeforeunload = (on) ? function() { return message; } : null;
    }
</script>

Просто вставьте это в ваш <h:head> шаблон или просто поместите его в какой-нибудь script.js файл, который вы включите в <h:outputScript>.

Answer 2

Это сработало для меня.

$(function() {
            // Set the unload message whenever any input element get changed.
            $('input').change(function() {
                setConfirmUnload(true);
            });

            // Turn off the unload message whenever a form get submitted properly.
            $('form').submit(function() {
                setConfirmUnload(false);
            });
        });

        function setConfirmUnload(on) {
            var message = "You have unsaved data. Are you sure to leave the page?";
            window.onbeforeunload = (on) ? function() { return message; } : null;
        }