Как сохранить состояния select, checkbox, radiobuttons и пр. на странице HTML?

Question

[alex_lemurski]

Всем добрый день!
потихоньку строю проект на Spring Boot MVC, в качестве virew использую HTML страницы с надстройкой Thymeleaf, и возникла проблема, в том что при обновлении страницы сбрасываются все значения указанных в теме полей.

Поясняю:
к примеру, если я зайти на страницу просмотра данных объекта ".../employeeView/5" (5 - это уник ID генерируемый БД), далее на этой странице есть кнопка "Править", нажимаю ее захожу на ".../employeeUpdate/5" (ID тот же понятно дело) все настроенные поля select, chexbox и т.д. сбрасываются. Да, я находил JS скрипты которые сохраняют состояния этих полей, и работают как надо, но есть нюанс! Дело в том что если после правки предыдущей страницы зайти на страницу другого объекта, к примеру ".../employeeView/6", а потом через кнопочку на ".../employeeUpdate/6", то JS скрипт подгружает сохраненные данные полей с предыдущей версии страницы .../employeeUpdate, не объекта с ID=5, а именно версии страницы.
Вопрос: возможен ли вариант JS скрипта учитывающий или ID из URL что-бы подгружать поля текущей страницы, или оперативно сохранять страницу View перед тем как и с которой я захожу на Update этого объекта, и подгружать данные именно с нее?

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

Answer 1

[Алексей Уколов]

Не совсем понятно, что именно вам нужно сохранять и что именно не работает.
Временное состояние формы, чтобы пользователь мог закрыть страницу, не отправляя изменения на сервер, и вернуться к ней позже? Или прям полноценное редактирование?

Если второе, то это и должно храниться на сервере. Или у вас при открытии формы поля формы не заполняются значениями из БД и она пуста? Тогда это отдельная проблема, не имеющая никакого отношения к JS.

Если же первое, то у вас, как я понял, уже есть какой-то скрипт, только он багованный - показывайте, мы вам поможем разобраться.

Comments

[alex_lemurski]

полноценное редактирование
у меня не форма как регистрация на сайте, что то там позаполнял, проскочил каскадно и все. нет.

у меня формы отображения множества объектов с возм их редактирования (я не зря акцентировал внимание на ID), все хранится в БД, всё в нее записывается и загружается из нее как надо, все поля вариантов выбора селекта и чекбокса и радиобаттон подгружаются на стр редактирования данных (они иниц через цикл в HTML, не хардкодно прописаны), НО эти поля сбрасываются (не удаляются) на как только захожу на стр редактирования, не в БД, а на странице, т.е. решив поправить у объекта какое то одно поле, приходится заново выбирать сброшенный поля как было сохранено до захода на стр обновления, и это не дело.

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

[Алексей Уколов]

Вы написали три абзаца текста, но так и не стало понятно в чём конкретно у вас проблема и какой сценарий вы пытаетесь реализовать.
Чем "стр редактирования" отличается от "стр обновления"? Что такое "стр редактирования не в БД"? У вас есть что ли "стр редактрования в БД"?

все поля вариантов выбора селекта и чекбокса и радиобаттон подгружаются на стр редактирования данных

НО эти поля сбрасываются (не удаляются) на как только захожу на стр редактирования

Вы на сервере корректно заполняете поля формы, получаете её в нужно виде в HTML, но потом что-то сбрасывает все поля в браузере?

[alex_lemurski]

так, поясняю на картинках, иначе совсем тяжело

по порядку:
вот главное меню отображения объектов из БД


далее, если нажать на кнопку "Просмотр" мы попадаем в меню просмотра данных (ID 26)


и через это меню (и только через него) можно попасть нажав на кнопку "Править" в меню Обновления данных объекта (опять ID 26)


поле 005 это селект - выбираем из выпадающего списка
поле 009 это чекбокс - ставим глаки где надо
все остальное заполняем и т.д.
нажимаем "ОК" и все сохраняется в БД как надо, все норм.
но если снова нажать кнопку "Править", то поля 005 и 009 сбрасываются, т.е. 005 селект переход на первое значение из списка, а 009 все галочки исчезают

никто и ничто это специально не сбрасывает в браузере, так оно работает по умолчанию, если не использовать JS фиксики или не колдовать на стороне сервера (что я сделал но меня это не устраивает)

я находил JS скрипты которые сохраняют выбранные данные (005 и 009 в моем случае) когда я захожу стр Обновления данных после их сохранения, но! теперь внимание! если после этого я зайду на стр Обновления данных другого объекта (ID 27 к примеру) то JS подгрузит данные предыдущего сохранения. это понятно? т.е. как бы с объекта ID 26, но это не так! он просто погружает сохраненные данные с предыдущей страницы Обновления данных, со стр HTML как таковой. вот и все.

[Алексей Уколов]

поле 005 это селект - выбираем из выпадающего списка
поле 009 это чекбокс - ставим глаки где надо
все остальное заполняем и т.д.
нажимаем "ОК" и все сохраняется в БД как надо, все норм.
но если снова нажать кнопку "Править", то поля 005 и 009 сбрасываются, т.е. 005 селект переход на первое значение из списка, а 009 все галочки исчезают

У вас это всё происходит через AJAX без перезагрузки страницы?

[alex_lemurski]

никаких AJAX и прочих надстроек
только bootstrap для визуал (судя по скринам)
ед JS скрипты это только сортировка столбцов и поиск по ним, на первом скрине видно
после нажатия кнопки ОК все сохраняется и перебрасывает в меню Просмотр данных, кнопка Отмена делает тоже самое только ничего в БД не сохраняет (не обновляет)

[Алексей Уколов]

А проблема у вас именно с этими двумя полями только или вообще со всеми? Если со всеми, то нужно на стороне сервера решать вопрос, чтобы сервер отдавал корректный HTML. Если только с двумя, то, может, это кастомные компоненты, не основанные на стандартных инпутах - тогда нужно смотреть как конкретно они сделаны и как в них указать значение программно.

[Сергей delphinpro]

Алексей Уколов, может все проще, и нужно только добавить атрибут selected нужной опции в селекте?

[Алексей Уколов]

Сергей delphinpro,

чтобы сервер отдавал корректный HTML

[alex_lemurski]

только с полями 005 и 009, и все
все остальное подгружается корр, сравните скрины Просмотр данных и Обновеление данных, все что заполнено и сохранено все подгружается
вот, к примеру, поле 008 дата не так давно вело себя так же, но я нашел рабочий скрипт, немного его адаптировал и дата теперь подгружается та что была сохранена, вне зависимости какой из объектов (ID) из бд отображается
все html стандартные, с jsp (но это уже устаревшее от Spring) эффект будет тот же. все чекбоксы, радиобаттоны и селекты сбрасываются по умолчанию.
вобще все нормально работает кроме вот таких вот html прибамбасов

пример кода для поля 005


th: - это надстрой thymeleaf для динамики отображения данных, html как бы каркас, на одной странице отображаются разные объекты одного типа, из БД

[Алексей Уколов]

Ну всё правильно, вам нужно в option добавить атрибут selected на сервере, тогда будет подставляться правильное значение. Это, если как вы говорите, у вас действительно нет никакого AJAX и форма генерируется и отдаётся сервером отдельно для каждой сущности.
Никакие "скрипты" тут не нужны и это никакие не "прибамбасы" - это голый HTML, самые фундаментальные основы веб-разработки.

[alex_lemurski]

это вот так?


ну нет, в данном случае такое не прокатит

[Алексей Уколов]

это вот так?

Ну да, примерно.

ну нет, в данном случае такое не прокатит

Рассказывайте почему.

[Сергей delphinpro]

alex_lemurski, не для всех этот атрибут прописывать. нужно условие
я этот фрейм не знаю (может там есть что-то типа th:if=""). на голом пхп было бы примерно так

$valueFromDb = 1;
foreach ($items as $item) {
  if ($item['value'] === $valueFromDb) {
    echo '<option value="'.$item['value'].'" selected>'.$item['text'].'</option>';
  } else {
    echo '<option value="'.$item['value'].'">'.$item['text'].'</option>';
  }
}

[alex_lemurski]

да он что есть что его нету этот selected, конкретно механику html не объясню я ее не знаю
а вот если к чекбоксам прибавить checked, то на странице обновления данных, где бы галки не стояли, проставятся все
я эти варианты уже испробовал

вот как сделал я, и пока этим пользуюсь


в контроллере собирается коллекция всех профессий
далее, у данного объекта я беру текущую профессию (currentProfession см на скрине, вот он как раз selected)
далее из коллекции профессий удаляется текущая профессия, что бы они не дубл в выпадающем списке select, и все
но этот как то костыльно

[Алексей Уколов]

Подытожим. Чтобы "сохранить состояние select", нужно на стороне сервера выбранному option указать атрибут selected. Аналогично для чекбокса - checked. То, что это сложно делается в вашем шаблонизаторе, это печально, конечно, но ничего не меняет.

[Александр Опарин]

У Thymeleaf для этого есть th:selected, просто будет что-то вроде

<select>
   <option th:each="prof : ${profession}" 
                 th:selected="${prof.profId == currentProfession.profId}">
                 th:value="${prof.profId}">
                 th:text="${prof.professionName}">
   </option>
</select>

А еще есть th:field, он тогда сам выберет нужное значение в select'е

[alex_lemurski]

th:selected просто сократит код в html
в контроллере все равно придется получать текущее состояние профессии, этого я и хочу избежать
а собственно где и как тут применить field?

[Алексей Уколов]

получать текущее состояние профессии, этого я и хочу избежать

Ну а как вы собираетесь подставлять это состояние в форму иначе? Чтобы что-то где-то оказалось, это что-то надо получить. А самый простой способ это что-то подставить куда нужно мы вам тут написали.

Answer 2

[Герман Рэй]

Не знаю может быть я не правельно понял. Вам надо сохранить состояние чекбоксов и т.д. Тогда записывайте сшстшяние в localStorage.