Rails中的Bootstrap模式保持显示第一条记录

Question

当我点击Modal中的View时，它会一直显示第一条记录。即使我点击第二条记录，它仍会显示第一条记录。下面是我如何实现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>

Answer 1

这里有3个选项：

1. 为每条记录生成一个模式 - 你可以做的最糟糕的事情
2. 使用数据属性更新模态的内容
3. 使用ajax操作，您将更新模式的内容并使用$('#myModal').modal('show') http://getbootstrap.com/javascript/#modals-usage
打开模式

<强> 1。为每条记录生成一个模态

<% @usernotes.each do |usernote| %>
  <%= link_to 'View in Modal', "#", data: {toggle: "modal", target: "#myModal_<%= usernote.id %>"} %>
  <div class="modal fade" id="myModal_<%= usernote.id %>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    ....
    <span class="note"><%= raw(usernote.note) %></span>
    ....
  </div>
<% end %>

---

<强> 2。使用数据属性更新模态的内容

<% @usernotes.each do |usernote| %>
  <%= link_to 'View in Modal', "#", data: {usernote: usernote.note}, class: 'user_note_modal' %>
<% end %>

 $('.user_note_modal').on('click', function() {
    $('#myModal span.note').html($(this).data('usernote'));
    $('#myModal').modal('show');
  });

P.S。为什么要使用.modal('show')？只是这样你才能确保先更新模态的内容，然后再显示它。

---

第3。使用ajax操作 - 假设您的资源名称为UserNote，并且您user_notes_controller采取了show操作：

<% @usernotes.each do |usernote| %>
  <%= link_to 'View in Modal', usernote_path(usernote), data: {toggle: "modal", target: "#myModal"}, remote: true %>
<% end %>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-body">
    <span class="note"></span>
  </div>
</div>

单击一个链接将触发一个ajax事件，该事件将需要show.js.erb模板，您将更新模式的内容然后显示它：

app/views/user_notes/show.js.erb

$('.modal-body span.note').html('<%= j(render @usernote.note) %>');
$('#myModal_').modal('show');

Answer 2

问题

我认为你做过类似的事情：

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

问题是你对所有模态使用相同的html ID（#myModal）。除了事实ID复制不符合W3C之外，这就是问题的原因。

当您点击其中一个链接时，它将打开第一个带有#myModal ID的模式（这是第一个记录的模态）。

那么，如何修补这个问题？

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

一种简单的方法是为所有模态使用不同的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视图（代码将发送到您的浏览器并进行评估）。

这可以通过使用link_to中的remote: true选项来完成（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请求可能更好。但是您可能会因为需要等待服务器响应而获得一些延迟。

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