Блог

У меня есть модальный, который появляется при нажатии на элемент div. Как я могу передать текст элемента div в модальный для редактирования, а затем обновить div новым текстом при нажатии кнопки сохранения? Я использую Bootstrap / jQuery v3.4.1 JavaScript и CSS.

Вот мой элемент div:

 <div id='item' class='board-list' data-toggle='modal' data-target='#DetailsModal'>
     <p>Editable Text</p>
</div>
  

и мой модальный:

 <div id="DetailsModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">amp;times;  </button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                ...
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
  

Чтобы передать текст элемента другому элементу или обновить текст элемента с помощью JavaScript, используйте HTMLElement.innerText метод:

 const $input = document.getElementById('input')
const $btn = document.getElementById('btn')
const $output = document.getElementById('output')
var currentText = $output.innerText

$input.value = currentText

$btn.addEventListener('click', () => {
  currentText = $output.innerText
  var newText = $input.value
  $output.innerText = newText
})  

 <input id="input" type="text">

<button id="btn">Update output text</button>

<br /><br />

<div id="output">
  Lorem ipsum dolor sit amet.
</div>  

Сначала вам нужно добавить текстовый ввод или текстовую область в свой модальный. Например:

 <div class="modal-body">
    <textarea class="modal-text-editor"></textarea>
</div>
  

Основываясь на предоставленном вами коде, похоже, что вы используете Bootstrap. Предполагая, что вы включили jQuery и Bootstrap JS, вы можете использовать их модальные события Javascript.

 var editing_text_element;
// get text into editor on modal show
$('#DetailsModal').on('show.bs.modal', function(e) {
    editing_text_element = $(e.relatedTarget).find('p');
    $(this).find('modal-text-editor').val(editing_text_element.text());
});

// save text to <p> tag after saving
$('#DetailsModal').find('btn-primary').on('click', function(e) {
    var edited_text = $('#DetailsModal').find('modal-text-editor').val();
    editing_text_element.text(edited_text);
});

// clear modal upon close
$('#DetailsModal').on('hidden.bs.modal', function(e) {
    $(this).find('modal-text-editor').val('');
});