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

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

 
 
 
 
 × 
Test
 
 
  
 
 Close Save changes 
 
 
  

Answer 1

3个选项：

1. 为每条记录生成一个模态 – 这是你能做的最糟糕的事情
2. 使用数据属性来更新模态的内容
3. 使用ajax动作，你将更新模态的内容并用$('#myModal').modal('show')打开模态$('#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 %>"} %> 
 .... <%= raw(usernote.note) %> .... 
 <% 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'); }); 

ps为什么要使用.modal('show') ？ 只是为了确保首先更新模态的内容然后显示它。

---

3.使用ajax操作 – 假设您的资源名称是UserNote并且您有user_notes_controller和show action：

 <% @usernotes.each do |usernote| %> <%= link_to 'View in Modal', usernote_path(usernote), data: {toggle: "modal", target: "#myModal"}, remote: true %> <% end %> 
 
  
  

单击一个链接将触发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 %> 

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

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

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

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

一种方法，简单的方法是为所有模态使用不同的ID。 例如：

 <%= link_to ... data: {toggle: "modal", target: "#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请求可能更好。 但是您可以获得一些延迟，因为您需要等待服务器响应。

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