Rails中的Bootstrap Modal一直显示第一条记录

当我单击模态中的“视图”时，它继续仅显示第一条记录。即使我单击第二条记录，它仍然显示第一条记录。下面是我如何实现 link_to 切换到名为 myModal 的模式框。

<%= link_to 'View in Modal', "#", data: {toggle: "modal", target: "#myModal"} %>
      <div class="modal fade" id="myModal" 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">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Test</h4>
          </div>
          <div class="modal-body">
            <span class="note"><%= raw(usernote.note) %></span>
          </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>

问题

我想你已经做了类似的事情：

<% @usernotes.each do |usernote| %>
 <%= link_to ... %>
 // code of modal associated to the usernote
<% end %>

问题是您对所有模式使用了相同的 html ID（#myModal）。除了 ID 重复不符合 W3C 标准之外，这也是问题的原因。

当您单击其中一个链接时，它将打开第一个模式，其中包含#myModalID（这是第一条记录的模态）。

那么，如何解决这个问题呢？

简单的方法：每个用户注释一个模式

一种方法（最简单的方法）是对所有模态使用不同的 ID。例如：

<%= link_to ... data: {toggle: "modal", target: "#modalForUserNote#{ usernote.id }"} %>
  <div id="modalForUserNote<%= usernote.id %>" ...>
  // ....

但这种方式并不是最好的方式：您只需为每个用户注释创建一个模态...如果您有 1000 个用户注释，您将在 html 中生成 1000 个模态...这显然非常糟糕...

另一种方式：javascript回调

另一种方法是仅创建一个模式并使用一些 Javascript 代码编辑其内容。

代码示例可以是：

html code

  // the modal code

  <% @usernotes.each do |usernote| %>
    <% link_to ..., data: {toggle: "modal", target: "#modal"}, 'data-usernoteid' => ..., 'data-usernotedata' => ... %>
  <% end %>

javacript code (using jQuery)

  $('.modalLink').on('click', function() {
    $('#modal #idOfTheUserNote').html($(this).data('usernoteid'));
    // ...
  });

您可以注意数据属性的用法。 数据属性可以替换为对 Rails 应用程序的 AJAX 请求，该请求将返回 JSON 数据。

另一种方式：AJAX请求

最后一种方法是通过 Ajax 调用来请求 Rails 应用程序。您的应用程序将呈现 Javascript 视图（代码将发送到您的浏览器并进行评估）。

这可以简单地通过使用来完成remote: truelink_to 中的选项（rails 将自行处理 ajax 请求。

下面的代码可以做到这一点：

html code

  // the modal code

  <% @usernotes.each do |usernote| %>
    <% link_to 'text', some_action(usernote), data: {toggle: "modal", target: "#modal"}, remote: true %>
  <% end %>

controller code

   def some_action
     @usernote = Usernote.find_by_id(param[:id])
   end

view to render: for example usernote/some_action.js.erb

   $("#modal #modalIdOfTheUsernote").html("<%= @usernoed.id %>");

最好的方法是什么？

显然不是第一个。

在其他两个之间进行选择取决于您想要做什么：

• 对于实时更新，AJAX 请求可能更好。但是您可能会遇到一些延迟，因为您需要等待服务器响应。

• 否则，数据属性就足够了。