Rails中的Bootstrap Modal不断显示第一条记录 [英] Bootstrap Modal in Rails Keeps displaying the first record

问题描述

当我单击模态视图时，它一直只显示第一条记录.即使我单击第二条记录，它仍会显示第一条记录.下面是我如何实现 link_to 切换到名为 myModal 的模态框.

When I click on the View in Modal, it keeps on displaying only the first record. Even if I click on the second record it still displays the first one. Below is how I implemented the link_to toggle to modal box called 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>

推荐答案

这里有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');
  });

附言为什么使用 .modal('show')?只是为了确保先更新模态框的内容，然后再显示它.

p.s. why use .modal('show')? just so you make sure to update the content of the modal first then display it.

3.使用 ajax 动作 - 假设你的资源名称是 UserNote 并且你有 user_notes_controller 和 show 动作:

3. use ajax action - assuming your resource name is UserNote and you have user_notes_controller with show action:

<% @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 模板，您将在其中更新模式的内容，然后显示它:

clicking on one link will trigger an ajax event that will expect a show.js.erb template, where you'll update the content of the modal and then display it:

app/views/user_notes/show.js.erb

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

这篇关于Rails中的Bootstrap Modal不断显示第一条记录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！