Загрузить данные в модальном

Question

Я пытаюсь загрузить данные в модальное всплывающее окно.

В моей модели Post у меня есть заголовок и описание.

Я бы хотел, чтобы заголовок отображался в таблице, и когдащелкнул модальное окно, чтобы отобразить текст описания внутри.

(Ниже приведен код таблицы с индексом, заголовком поста и ссылкой, открывающей модальное окно.)

<% @posts.each_with_index do |post, index| %>
    <tr>
      <td><%= index + 1 %></td>
      <td><%= post.title %></td>
      <td>Link-to-display-modal-goes-here</td>
    </tr>
<% end %>

У меня есть скрытый div, и я могу заставить его появиться / исчезнуть, нажав кнопку.Я просто не знаю, как заполнить div.

Ниже div, который я хотел бы загрузить описание поста.

<div id="myModal" class="modal hide fade">
  post's description goes here.
</div>

Любая помощь очень ценится.

Answer 1

замените вашу ссылку для отображения на модал идет ссылкой, которая вызывает ваш собственный метод javascript.В этом методе вы можете затем установить любые данные, которые вы хотите, в своем модале, а затем показать их.

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

<td><a href="#" onclick="javascript:openMyModal('<%= post.description %>')">Description</a></td>

тогда ваш javascript может выглядеть примерно так:

<script type="text/javascript">
  $(document).ready(function(){
    window.openMyModal = function (postDescription) {
      $('#myModal').text(postDescription);
      $('#myModal').modal('show');
      return false;
    }
  });
</script>

Это всего лишь пример, так что вам придется настроить его так, чтобы он делал именно то, что вы хотите.Однако движение в этом направлении должно работать для вас.

Answer 2

Вместо использования переключателя данных для открытия модального режима вы можете связать исходную ссылку с обработчиком кликов. Я предпочитаю делать это, чтобы поместить это в строку, как это делает csturts, лучше разделить HTML и скрипт. Таким образом, вы можете иметь ссылку

<a class="btn btn-modal" data-desc="description">title</a>

и скрипт

<script type="text/javascript">
$(document).ready(function(){
  $('.btn-modal').click( function() {
    $('#myModal').find('#myModal-div').html($(this).data('desc'));
    $('#myModal').modal('show');
  });
});
</script>

Answer 3

Если вы используете jQuery, вы можете заполнить div следующим вызовом:

$('#my-modal-div').html('<span>Some HTML GOES HERE</span>')