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

Question

我无法让我的 select 框在我的 bootstrap-modal 中正常工作。

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

当我点击我的“分配”时 button 我的 modal 打开多次，具体取决于我当前有多少条记录在页面上。（如果我的 table 中有 3 条记录，ex.I 必须单击取消 3 次才能关闭我的模式）我显然只希望我的模式打开一次。
当我select从f.select下拉框中输入“manager”然后点击"Assign"它更改第一条记录的经理字段，而不是我要分配的当前记录。（如果我有 3 条记录并在第 3 条记录上单击分配，它将更新第 1 条记录的经理字段）。

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

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

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

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

Answer 2

问题 1： 模态弹出，因为每个循环都在创建一个新的 'hidden' 模态，该模态设置为在按下触发器时弹出。因此，您需要通过为每个模态分配唯一的 count/id 变量来隔离每个模态并相互触发。这是它的工作原理：

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

data-target=".assign-modal" 需要更改为 data-target="#modal-#{project.id}"

模态框本身也需要这样做。所以拉出 .assign-modal class 并为每个模态使用 ids。类似于：

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

这将解决多模式 pop-up 问题。关于第 2 期！

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

这样，当提交表单时，它会发送带有 params[:manager_id] = value of option selected 的参数，并且以关联的方式超级容易使用。此外，我们不需要将 blank/default 作为 collection 的一部分。我们可以将一个选项传递给 f.select 来实现它:)

希望对您有所帮助！

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

Bootstrap Modal not working properly with my Rails logic

ruby-on-rails

twitter-bootstrap

ruby-on-rails-4

bootstrap-modal