Bootstrap: модальное диалоговое окно для динамического редактирования данных - PullRequest
Новая
       22

Bootstrap: модальное диалоговое окно для динамического редактирования данных

0 голосов
/ 08 ноября 2019

Этот вопрос может быть дубликатом, но я не нашел подходящих ключевых слов для поиска, чтобы найти решение, которое я ищу.

Я работаю над веб-сайтом, который показывает таблицу пользователю. В одном столбце таблица содержит заметки, которые пользователь может редактировать. Для этого я добавил кнопку для каждой строки в этом столбце, чтобы открыть модальное диалоговое окно начальной загрузки, где пользователь может редактировать заметку, связанную с конкретной строкой. У меня также есть JavaScript-функция «saveNote (recordId)», которая считывает введенный текст из поля ввода в модальном диалоговом окне и затем отправляет его на сервер с помощью сообщения ajax.

Теперь мой вопрос: каки где я могу сохранить идентификатор строки, которая в данный момент редактируется, чтобы я мог передать ее в функцию saveNote ()? Я нашел пример в документации по начальной загрузке, но он охватывает только динамическую передачу данных в модальное диалоговое окно ( Изменение модального содержимого ). Есть ли какой-нибудь общий способ сделать это в модальном диалоге или мне нужна глобальная переменная для этого в JavaScript?

Ответы [ 2 ]

1 голос
/ 08 ноября 2019

где вы привязываете кнопку saveNote, вы можете установить значение кнопки в качестве идентификатора записи и передать его методу следующим образом: 

<button value""+ recordId +"" onclick="saveNote("+ recordId +")">edit</button>

как-то так.

0 голосов
/ 08 ноября 2019

По сути, поместите id каждой строки в атрибут data-id кнопки строки. Затем привяжите модальное к событию show.bs.modal, затем используйте $(e.relatedTarget).data('id'), чтобы получить data-id кнопки, открывшей модальное окно. Проверьте комментарии для некоторых других объяснений 

$(function() {
  $('#exampleModal').on('show.bs.modal', function(e) {
    $('.modalTextInput').val('');
    let btn = $(e.relatedTarget); // e.related here is the element that opened the modal, specifically the row button
    let id = btn.data('id'); // this is how you get the of any `data` attribute of an element
    $('.saveEdit').data('id', id); // then pass it to the button inside the modal
  })

  $('.saveEdit').on('click', function() {
    let id = $(this).data('id'); // the rest is just the same
    saveNote(id);
    $('#exampleModal').modal('toggle'); // this is to close the modal after clicking the modal button
  })
})

function saveNote(id) {
  let text = $('.modalTextInput').val();
  $('.recentNote').data('note', text);
  console.log($('.recentNote').data('note'));
  console.log(text + ' --> ' + id);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <input class="modalTextInput form-control" placeholder="Text Here" />
      </div>
      <div class="modal-footer">
        <button type="button" class="saveEdit btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

<table class="table table-bordered">
  <tbody>
    <tr>
      <td>Some data here</td>
      <td>
        <button class="btn btn-success btn-sm" data-id="1" data-toggle="modal" data-target="#exampleModal">Edit</button>
      </td>
    </tr>
    <tr>
      <td>Another data here</td>
      <td>
        <button class="btn btn-success btn-sm" data-id="2" data-toggle="modal" data-target="#exampleModal">Edit</button>
      </td>
    </tr>
    <tr>
      <td>More data here</td>
      <td>
        <button class="btn btn-success btn-sm" data-id="3" data-toggle="modal" data-target="#exampleModal">Edit</button>
      </td>
    </tr>
  </tbody>
</table>

<p class="recentNote"></p>
...