Как динамически изменить модальные данные начальной загрузки 4, представленные кнопкой - PullRequest
Новая
       7

Как динамически изменить модальные данные начальной загрузки 4, представленные кнопкой

0 голосов
/ 09 ноября 2018

Folks Я использую Bootstrap 4 Madal.

Вариант использования: пользователь нажимает кнопку редактирования, и он отправляет текущие данные (получаемые из базы данных) модалу. Пользователь редактирует модальные и отправляет, это вызывает функцию JS, которая обновляет базу данных. Если я обновляю страницу, у меня нет проблем, но я не хочу этого делать, поскольку большая часть этих данных динамически добавляется с помощью прокрутки вниз. и обновление страницы отправляет пользователя обратно наверх. поэтому я использую jquery для обновления базы данных и просто динамического обновления данных формы, чтобы пользователь мог продолжать работу на своем месте.

У меня есть кнопка, которая в основном запускает модал в редактируемой форме и отправляет заголовок данных модалу 

<button type="button" id="btn1" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-title="Post 1">Edit</button>

модальный ввод выглядит следующим образом 

<form>
<input type="text" class="form-control" id="title" name="title">
<button type="button" class="btn btn-primary" onClick="edit(this.form)">Submit</button>
</form>

Этот модал, конечно, получает данные по решению, предоставленному загрузчиком 4 

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) 
  var recipient = button.data('title')
  var modal = $(this)
  modal.find('.modal-body input#title').val(recipient)
})

Пользователь обновляет поле и отправляет изменение в функцию редактирования 

function edit(form){
  var title = form.title.value;
  ////// insert into database
  var btn1 = document.getElementById("btn1");
  btn1.setAttribute( 'data-title' ,form.title.value );
  alert(title);
}

теперь, как вы можете видеть, после вставки данных функция обновит «data-title» до вновь добавленного значения пользователем. Я могу видеть это в "осмотреть элемент" ....

ПРОБЛЕМА
Однако каждое повторение одного и того же действия отправляет старые данные

например Допустим, данные поступили из базы данных «Пост 1»

enter image description here

Как видите, значение enter image description here

Теперь пользователь меняет его на «Опубликовать 2» и нажимает кнопку «Отправить»

Теперь это новое значение enter image description here

Это все хорошо, однако, если, скажем, пользователь снова нажимает кнопку редактирования, теоретически новое значение, установленное для «data-title», должно быть отправлено модальному, но модальное возвращается с тем же старым «Post-1»

Я искал в Интернете, и, очевидно, мне нужно установить что-то для "show.bs.modal" и очистить форму, но ни один из них не работает.

что мне не хватает. вот кодекс

https://codepen.io/ozzie6935/pen/bQpmjY

1 Ответ

0 голосов
/ 09 ноября 2018

jQuery .data метод извлекает кэшированные атрибуты data- из объекта данных jQuery (см. this ), что означает, что они не будут обновляться при изменении соответствующих атрибутов элемента DOM. Вместо этого используйте .attr(). 

$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget) 
  var recipient = button.attr('data-title')
  var modal = $(this)
  modal.find('.modal-body input#title').val(recipient)
})

Вот обновленный код вашего вашего.

...