Sorting fields of nested forms in rails

Question

I am trying to create an inventory form that sorts products by category. Ideally, I will have these products listed by categories and put some javascript to hide / show products of a certain category.

I am currently having problems sorting my products into categories on my form. Here is what I have now (modeled on Rails Bates Railscasts for nested attributes):

class InventoriesController < ApplicationController def new @title = "Take Inventory" @vendor = ProductVendor.find(params[:product_vendor_id]) @inventory = Inventory.new() @products = @vendor.products.active @products.each do |product| @inventory_line_item = @inventory.inventory_line_items.build({:product_id => product.id}) end end 

My form for a new inventory:

 <%= form_for @inventory do |f| %> <table> <tr> <th>Item</th> <th>Quantity</th> </tr> <% f.fields_for :inventory_line_items do |builder| %> <tr> <td><%= builder.object.product.name %></td> <td><%= builder.text_field(:quantity, :size => 3) %></td> <%= builder.hidden_field :product_id %> </tr> <% end %> </table> <%= f.hidden_field(:user_id, :value => current_user.id) %> <%= f.hidden_field(:location_id, :value => current_location.id) %> <%= f.hidden_field(:product_vendor_id, :value => @vendor.id) %> <%= f.submit "Submit" %> <% end %> 

So, I have another model called product_category in which there are products. How to sort and categorize your products in the controller and form? Also, is there a way to do this with Formtastic? Thanks!

Answer 1

This is actually quite simple to implement. Add a hidden field to the nest_form field with the position attribute (add this attr to your model, of course) and add this to your js along with jquery-ui.js

  $('#task_fields').sortable({ items: '.fields', dropOnEmpty: true, cursor: 'move', handle: '.move', opacity: 0.4, scroll: true, axis:'y', placeholder: 'ui-state-highlight', start: function(e, ui) { ui.placeholder.height(ui.item.height()); }, update: function() { $(this).children(".fields").each(function(index) { $(this).children('input.task_position').val(index + 1); }); } }); 

this is what i have in my _form.html.haml

 = f.fields_for :tasks do |t| = t.text_field :name = t.hidden_field :position, :class => :task_position = t.collection_select :account_id, Account.all, :id, :full_name, :prompt => 'Assign task to...' .button-group %span{:class => "button icon no-text move pill"} = t.link_to_remove "", :class => "button icon no-text remove pill" = f.link_to_add "Add a Task", :tasks, :class => "button icon add" 

It worked very well.