Как отобразить предупреждающее сообщение, если пользователь внес изменения на странице и решил оставить эту страницу в приложении JSF?

Question

Я нахожусь в приложении JSF2.0, у которого есть много jsf-файлов, каждая страница может иметь входы + некоторые selectMenu . Мне нужно конкретное решение о том, как отобразить предупреждающее сообщение (в виде модального режима), когда пользователь вносит некоторые изменения в эту текущую страницу (например, заполняя некоторые входные данные) и решает посетить другие страницы или закрыть текущие вкладки.

Answer 1

Так что есть несколько частей к этому.

Прежде всего, чтобы создать модал, вам нужен скрытый div. Затем вам понадобится JQuery, который будет обнаруживать любые изменения, чтобы затем запустить этот мод.

Вы можете сделать это, используя div, похожий на этот, с помощью CSS ниже:

HTML

<div class="modal hide">
<p>Content here...</p>
<button class="close">Close</button>
</div>

CSS

.hide{
  display: none;
}
.modal{
  position: fixed;
  width: 50%;
  height: 100px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: 0 auto;
  background-color: red;
  color: white;
  text-align: center;
}

Затем добавьте класс ко всему, что нужно предупреждать при изменении. Если необходимо ввести данные, просто добавьте обязательный атрибут, показанный ниже. Например:

<input type="text" name="example" class="change" required>

Затем вы можете использовать JQuery для обнаружения любых изменений и отображения модальных:

JQuery

$(".change").on("change", function(){
    $(".modal").removeClass("hide");
});
$(".close").on("click", function(){
    $(".modal").addClass("hide");
});

Затем он показывает модальное с кнопкой, которая дает возможность закрыть его.

Что касается ухода со страницы, это намного сложнее, так как вы можете предупредить пользователя, успешно отправившего форму. Не говоря уже о проблемах с пользовательским интерфейсом. Пожалуйста, обратитесь к этому ответу здесь: Определить браузер или закрытие вкладки

Я также собрал для вас рабочий JSFiddle - https://jsfiddle.net/Rockhopper92/vsmLkqLm/