Bootstrap 3 Form Modal while in loop

Question

I have this loop in my view:

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

I have this form that is looped in the above do block for each 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 %>

I've now put this form into a Bootstrap 3 modal. For brevity's sake I won't post the whole modal. Here's the trigger, which is looped for each inventory_item:

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

The problem I'm running into, is that my form uses attributes from the looped inventory_items to populate one of the hidden fields in this form. So here's my question:

How can I pass this variable from the loop to a modal when it is triggered?

EDIT

Here's my current modal:

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

Custom .js from @David Antaramian:

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

Answer 1

As it stands, my opinion is that you should not be doing a form_for inside of your @item-do-p loop. The modal needs to be populated with the form to save a single item to a ShoppingList, but in order to do that it must have an inventory_item_id. The form itself has the same data properties except for that input element.

To implement this, I am going to use jQuery and custom data attributes. In the view file, I have the following code:

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

In the controller-specific JavaScript asset file, add the following code:

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

There is one form located in the modal. In the container, we have repeating rows for each inventory item in @item. The "Add to List" button now has a custom data- tag, data-inventory-id, which is set from the @item-do-p loop. This tag specifies which inventory item we are adding to the ShoppingList.

The JavaScript code first selects all elements that are both button elements and have a data-inventory-id property. It registers a click() listener on all of them. When one of them is clicked, it gets the inventory ID of the item, assigns it to the inventory ID hidden field in the form, and then shows the form.

Please let me know if I misunderstood what you were trying to do.

Answer 2

After being pointed to this thread by edward above, I was able to tweak a few things to work well with rails: Passing data to a bootstrap modal

Button Trigger:

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

Modal:

<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);
});