Bootstrap Modal 无法与我的 Rails 逻辑一起正常工作

Question

我无法让我的选择框在我的引导模式中正常工作。

我正在使用 Rails 4 和 Bootstrap 3，并且出现了很多问题。

1. 当我点击我的“Assign”时，button 我的modal 会根据我当前在页面上的记录数打开多次。（例如，我必须点击如果我的表中有 3 条记录，请取消 3 次以关闭我的模式）我显然只希望我的模式打开一次。

2. 当我从f.select 下拉框中选择“ma​​nager”然后单击“分配”时，它会更改第一条记录的经理字段，而不是我的当前记录试图分配。 （如果我有 3 条记录并单击第 3 条记录上的分配，它将更新第 1 条记录的经理字段）。

这里有一些部分代码 sn-ps 来展示我到目前为止所做的事情：

index.html.erb

<tbody>
 <% @projects.each do |project| %>

  <tr>
   <td><%= project.manager %></td>
   <td><%= project.subject %></td>
   <td><%= project.status %></td>

   <td>
     <% if controller.action_name == 'pending' %>

     <button type="button" class: "btn btn-large btn-primary" data-toggle="modal" data-target=".assign-modal">Assign</button>

     <div class="modal fade assign-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">

      <div class="modal-dialog" role="document">

        <div class="modal-content">

          <div class="modal-body">

              <%= render partial: 'new_assign', locals: {project: project} %>

          </div>
         </div>
       </div>
      </div>   
   </td>
  </tr>
  <% end %>
  <% end %>
 </tbody>

_new_assign.html.erb

<div class="modal header">
  <button type="button" class="close" data-dismiss="modal" <aria-hidden="true">x</button>
  <h3 id="myModalLabel">Assign a Manager</h3>
</div>
<div class="modal-body">
 Manager(Project Manager)
 <%= form_for(project) do |f| %>
 <%= f.select :manager, [[""],["George"],["Thomas"],["Abe"],["Bill"]] %>
</div>
<div class="modal-footer">
 <%= f.submit "Assign", class: "btn btn-large btn-primary" %>
 <button type="button" class="btn btn-default" data-dismiss="modal" aria-hidden="true">Cancel</button>
   <% end %>
</div>

Answer 1

问题 1： 模式正在弹出，因为每个循环都在创建一个新的“隐藏”模式，该模式设置为在按下触发器时弹出。因此，您需要通过为每个模式分配唯一的计数/ID 变量来隔离每个模式并相互触发。以下是它的工作原理：

更新每个模态触发器以具有唯一的 id

data-target=".assign-modal" 需要更改为 data-target="#modal-#{project.id}" 之类的东西

模态框本身也需要这样做。所以拔出.assign-modal 类并为每个模态使用ID。比如：

<div class="modal fade" id="modal-#{project.id}" tabindex="-1" role="dialog" ...

这将解决多模式弹出问题。继续第 2 期！

问题 2： 集合已损坏。仅将[[""],["George"],["Thomas"],["Abe"],["Bill"]] 作为集合不允许将任何“值”分配给所选选项。因此，最好在控制器中建立一个散列并将其作为实例变量发送下来。像 {1: "George", 2: "Thomas", 3: "Abe", etc} 其中的数字是经理的主键 ID。

这样，当表单提交时，它会发送带有params[:manager_id] = value of option selected 的参数，并且以关联的方式非常易于使用。此外，我们不需要将空白/默认值作为集合的一部分。我们可以向 f.select 传递一个选项来实现这一点:)

希望这会有所帮助！

Answer 2

我相信您看到的问题来自您在 @projects 循环中包含了模式。这意味着三个记录创建三个具有相同assign-modal 类的模式，都响应相同的按钮。我认为这也是您的第二个问题的原因；当您单击第三条记录的按钮时，将显示三个模式。然后，您基本上是在更改第一条记录的管理器，因为与该记录相关的模态是前面的。

尝试将模式移到循环之外，最好是在表格之外。