Как правильно обновить значения sh на веб-странице после редактирования с использованием диалогового окна модели и AJAX?

Question

Мое приложение использует JSP / JQuery / Bootstrap. Я буду использовать упрощенный пример, чтобы сделать мой вопрос максимально простым.

Допустим, у меня есть страница «Просмотр пользователя» (например, / myapp / user / 55), которая отображает свойства пользователя как прочитанные только поля (например, «Имя», «Фамилия», «Адрес электронной почты») и есть кнопка «Редактировать».

При нажатии «Редактировать» открывается модальное диалоговое окно с полями ввода заполняется каждым значением и кнопкой «Сохранить изменения». Вы вводите новые значения, нажимаете кнопку «Сохранить изменения». Это вызывает AJAX POST для веб-сервера, который возвращает сообщение об успехе.

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

Проблема в том, что поля только для чтения на Страница просмотра пользователя не была обновлена ​​с новыми значениями.

Я думал после успешного POST, вместо того, чтобы просто сделать диалоговое окно невидимым, я мог бы принудительно обновить sh страницы просмотра пользователя. например просто перезагрузите "/ myapp / user / 55" ... но тогда я не увижу сообщение об успехе на странице, а также неэффективно перезагрузить всю страницу.

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

Answer 1

Если у вас есть ajax pu sh новых данных пользователя, вы можете обновить поля только для чтения: JQuery или vanilla JS.

JQuery:

$("#user_last_name").val(@user.last_name)

JS:

const lastNameField = document.getElementById('user_last_name')
lastNameField.value = @user.last_name

Выше предполагается, что ваши поля являются входными данными. Если поля являются интервалами, измените JQuery с .val на .text и JS с .value на .textContent.

Answer 2

Вам необходимо каким-то образом обновить html в связанных полях. Например, при получении ответа об успешном выполнении POST вы можете использовать значения из них (или из подготовленных для отправки данных) и устанавливать внутренние HTML.

document.forms.dialog.onsubmit = function(ev) {

  ev.preventDefault();

  // make AJAX here

  window.firstName.innerHTML = ev.target.firstName.value;
}

<div id="firstName">Prev. value</div>
<hr />
<form name="dialog">
  <input name="firstName" />
  <button type="submit" id="fakeSubmit">Mimic submit {firstName: 'Next value'}</button>
</form>

Answer 3

используйте это в поле успеха ajax call:

location.reload(true);

Примечание : - для сообщения Jquery используйте это во втором аргументе вызова функции после его успешного завершения пост запускает второй вызов функции с результатами.

'но тогда я не увижу сообщение об успехе на странице' : - используйте сообщение Jquery, чтобы вызвать функцию успешного сообщения, тогда вы можете показать предупреждение об успехе раньше location.reload (true) кодов. (предупреждение и refre sh в функции, вызванной после успешного сообщения Jqiery).

ссылка: https://api.jquery.com/jquery.post/