Question

我在视图中有这个循环：

<% @item.inventory_items.each do |p| %>

我有这个表单在每个do的上面inventory_item块中循环：

<%= form_for(@list_item) do |f| %>
             <%= f.hidden_field :upc, :value => @item.upc %>
             <%= f.hidden_field :inventory_item_id, :value => p.id %> 

             <%= f.select :shopping_list_id, options_for_select(ShoppingList.options_for_list(current_user.shopping_lists)), {}, :class => "form-control" %>
             <%= f.submit("Add It!", class: "btn btn-add") %>
<% end %>

我现在把这个表单放到Bootstrap 3模式中。为了简洁起见，我不会发布整个模态。这是触发器，它为每个inventory_item循环：

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#formModal">Add To List</button>

我遇到的问题是，我的表单使用循环inventory_items中的属性来填充此表单中的一个隐藏字段。所以这是我的问题：

如何在触发时将此变量从循环传递给模态？

修改

这是我目前的模式：

<div class="modal fade" id="addListItem" tableindex="-1" role="dialog" aria-labelledby="addListItem" 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="form-label">Add this item to a shopping list.</h4>
      </div>

      <div class="modal-body">
         <%= form_for(@list_item) do |f| %>
             <%= f.hidden_field :upc, :value => @item.upc %>
             <%= f.hidden_field :inventory_item_id, :id => "inventory-item-id" %> 

             <%= f.select :shopping_list_id, options_for_select(ShoppingList.options_for_list(current_user.shopping_lists)), {}, :class => "form-control" %>
             <%= f.submit("Add It!", class: "btn btn-add") %>
         <% end %>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>

    </div>     
  </div> 
</div>

来自@David Antaramian的

自定义.js：

$('button,[data-inventory-item-id]').click(function() {
    var inventoryID = $(this).data('inventory-item-id');
    $('#inventoryID').prop('value', inventoryID);
    $('#addListItem').modal('show');
});

Answer 1

就目前而言，我的观点是你不应该在你的form_for循环中进行@item-do-p。需要使用表单填充模式以将单个项目保存到ShoppingList，但为了做到这一点，它必须具有inventory_item_id。除了输入元素之外，表单本身具有相同的数据属性。

为了实现这一点，我将使用jQuery和自定义数据属性。在视图文件中，我有以下代码：

<div class="modal fade" id="addListItem">
    <div class="modal-dialog">
        <div class="model-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">
                    <%= form_for(@list_item) do |f| %>
                        <%= f.hidden_field :upc, :value => @item.upc %>
                        <%= f.hidden_field :inventory_item_id, :id => "inventory-item-id" %> 
                        <%= f.select :shopping_list_id, options_for_select(ShoppingList.options_for_list(current_user.shopping_lists)), {}, :class => "form-control" %>
                        <%= f.submit("Add It!", class: "btn btn-add") %>
                    <% end %>
            </div>
        </div>
    </div>
</div>

<div class="container">
    <% @item.inventory_items.each do |p| %>
        <div class="row">
            <div class="col-md-8">
                <%= p.name %>
            </div>
            <div class="col-md-4">
                <button class="btn btn-primary btn-lg" data-inventory-id="<%= p.id %>">Add To List</button>
            </div>
        </div>
    <% end %>
</div>

在特定于控制器的JavaScript资源文件中，添加以下代码：

$(document).ready(function() {
    $('button,[data-inventory-id]').click(function() {
        var inventoryID = $(this).data('inventory-id');
        $('#inventoryID').prop('value', inventoryID);
        $('#addListItem').modal('show');
    });
});

模态中有一个表单。在容器中，我们为@item中的每个库存项目重复行。 “添加到列表”按钮现在有一个自定义数据标记data-inventory-id，它是从@item-do-p循环设置的。此标记指定我们要将哪个广告资源项添加到ShoppingList。

JavaScript代码首先选择同时属于button个元素且具有data-inventory-id属性的所有元素。它在所有这些上注册了一个click()监听器。单击其中一个时，它将获取该项目的库存ID，将其分配给表单中的库存ID隐藏字段，然后显示该表单。

如果我误解了你的想法，请告诉我。

Answer 2

在上面的爱德华指出这个主题之后，我能够调整一些东西以适应rails：Passing data to a bootstrap modal

按钮触发：

<%= content_tag "button", class: "btn btn-default btn-lg addbtn", data: {id: "#{p.id}", toggle: "modal", target: "#addListItem"} do %>
          Add To List
<% end %>

模态：

<div class="modal fade" id="addListItem" tableindex="-1" role="dialog" aria-labelledby="addListItem" 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="form-label">Add this item to a shopping list.</h4>
      </div>

      <div class="modal-body">
         <%= form_for(@list_item) do |f| %>
             <%= f.hidden_field :upc, :value => @item.upc %>
             <%= f.hidden_field :inventory_item_id, :id => "inventoryID", :value => "" %> 

             <%= f.select :shopping_list_id, options_for_select(ShoppingList.options_for_list(current_user.shopping_lists)), {}, :class => "form-control" %>
             <%= f.submit("Add It!", class: "btn btn-add") %>
         <% end %>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>

    </div>     
  </div> 
</div>

JS：

$(document).on("click", ".addbtn", function() {
        var inventoryID = $(this).data('id');
        $("#inventoryID").val(inventoryID);
});

循环中的Bootstrap 3 Form Modal

2 个答案: