Передача переменных в Bootstrap Modal и передача их НАЗАД - PullRequest
Новая
       8

Передача переменных в Bootstrap Modal и передача их НАЗАД

0 голосов
/ 24 апреля 2019

Переменные данные, передаваемые модалу Bootstrap, жестко закодированы в поле HTML-элемента data-text с использованием «data-text» (в соответствии с примерами Bootstrap). Если цель модального режима состоит в том, чтобы позволить пользователю изменить это, то как мне отправить это обратно в необработанный HTML-текст данных, чтобы обновить его в следующий раз?

JS новичок здесь. Я получил модалы Bootstrap 4, работающие и обновляющиеся обратно на сервер от Ajax (с большим поиском в Google StackOverFlow, спасибо!). У меня около 100 текстовых элементов на странице, которые все загружают один и тот же модал для редактирования текстового поля, по которому щелкнули. Начальное значение поля жестко запрограммировано в HTML-код страницы в текстовом поле данных (следуя модальному примеру Bootstrap). Это позволяет передавать текущее текстовое значение, чтобы предварительно заполнить модальное поле существующим текстовым значением для редактирования.

Далее пользователь редактирует поле примечания в модальном режиме и нажимает кнопку «Отправить». Я могу получить значение и передать его обратно на сервер, и обновить DOM с новым отредактированным значением на странице, и все работает и выглядит великолепно! Пока все хорошо.

Теперь вот проблема. Поскольку я не смог выяснить, как изменить текстовое поле данных (которое жестко запрограммировано в HTML страницы), экран (DOM) обновляется новым значением после отправки правильно, но текстовое поле данных элемент не обновляется. Это все еще старая ценность. Это означает, что СЛЕДУЮЩИЙ раз, когда я нажимаю, чтобы редактировать текст, СТАРОЕ значение текстового поля предварительно заполняется в модале для редактирования.

Вопрос: как обновить текстовое поле html с помощью JS?

Я долго исследовал эту проблему, и без переполнения стека я бы никогда не смог заставить ее работать, так что я очень ценю вас, ребята. Десятки вопросов о передаче переменных TO Модалов, но очень мало о передаче данных обратно, и НИКОГО о настройке текста данных при отправке JS.

пример определения текстового элемента. Это немного упрощенный пример. Текстовое поле содержит некоторые данные из базы данных сервера, HTML генерируется PHP / MySQL. (1 из 100 элементов на странице): 

<td id="note_12345678" data-toggle="modal" data-target="#noteModal" data-note="<some text from db>" class="note"><same text from server db></td>

Вот код JS для отправки кода. Все работает, кроме последней строки, где я пытаюсь изменить поле «примечание к данным» элемента: 

function note_submit(element) {
    var note = document.getElementById('message-text').value;
    ajaxcall("/ajaxclick.php" , { note:note } , null); // Simplified, all is working.
    noteElement = document.getElementById('note_12345678');
    noteElement.innerText = note ; // Updates the DOM with submitted note.
    noteElement.data-note = note ; // <== trying to change data-note here but obviously a syntax error.
}

До последнего шага все работает нормально. Щелчок по текстовому полю открывает модальный режим, предварительно загружает текст для редактирования, позволяет пользователю редактировать, нажимает на кнопку «Отправить» на сервер с помощью Ajax для обновления, примечание DOM на экране обновляется JS. если я перезагружаю страницу, она загружает новое отредактированное текстовое значение с базы данных сервера. Все отлично работает. Много радости

Проблема в следующем, когда я нажимаю на текстовый элемент, чтобы отредактировать его, модал загружает значение OLD из примечания к данным, жестко запрограммированного в HTML. Как обновить его после отправки JS? Спасибо миллион за любую помощь. Так близко.

Обновлено: страница загружает jquery-3.3.1.js и bootstrap / 4.0.0 / js / bootstrap.min.js. Браузер FF V66.

...