以模态加载数据答案

【问题标题】：Load Data in Modal以模态加载数据
【发布时间】：2012-03-04 18:59:44
【问题描述】：

我正在尝试将数据加载到模式弹出窗口中。

在我的 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>

非常感谢任何帮助。

【问题讨论】：

标签： ruby-on-rails twitter-bootstrap

【解决方案1】：

将“link-to-display-modal-goes-here”替换为调用您自己的自定义 javascript 方法的链接。在这种方法中，您可以在 modal 中设置您想要的任何数据，然后显示它。

所以，当您生成视图时，请将当前链接替换为显示模式，如下所示：

<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>

这只是一个示例，因此您必须对其进行调整才能完全按照您的意愿行事。不过，这个方向应该适合你。

【讨论】：

嘿，我刚醒来并尝试了这个。效果很好，非常感谢您的帮助。

【解决方案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>

【讨论】：

【解决方案3】：

如果您使用的是 jQuery，则可以使用如下调用填充 div：

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

【讨论】：