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. generate one modal for each record - the worst thing you can do
2. use data attributes to update content of the modal
3. use ajax action where you'll update the content of the modal and open the modal with $('#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')?只是为了确保您先更新模态的内容，然后显示它即可.

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