Javascript 使用cocoon和rails3 jquery autocomplete动态添加预填充的嵌套表单

谢谢你抽出时间

我在rails 3.2上工作，我在使用gems，还有

我有以下型号的机器，零件，零件用途，机器成本和零件成本

具有多对多关联的机器和零件模型

    class Machine < ActiveRecord::Base
      attr_accessible :name

      has_many :part_usages
      has_many :parts, :through => :part_usage
    end

    class Part < ActiveRecord::Base
      attr_accessible :name
    end

    class PartUsage < ActiveRecord::Base
      attr_accessible :machine_id, 
                      :part_id
      belongs_to :part
      belongs_to :machine
    end

    class MachineCosting < ActiveRecord::Base

       attr_accessible :machine_id,
                       :total_cost,
                       :machine_name,
                       :part_costings_attributes

       attr_accessor :machine_name                

       has_many :part_costings, :dependent => :destroy

       accepts_nested_attributes_for :part_costings, :allow_destroy => true    

       def machine_name
         self.machine.try(:name)
       end

    end

    class PartCosting < ActiveRecord::Base
      attr_accessible :part_id,
                      :part_name,
                      :cost

      attr_accessor :part_name

      belongs_to :machine_costing
      belongs_to :part

      def part_name
        self.part.try(:name)
      end
    end

具有一对多关联的机器成本和零件成本模型

    class Machine < ActiveRecord::Base
      attr_accessible :name

      has_many :part_usages
      has_many :parts, :through => :part_usage
    end

    class Part < ActiveRecord::Base
      attr_accessible :name
    end

    class PartUsage < ActiveRecord::Base
      attr_accessible :machine_id, 
                      :part_id
      belongs_to :part
      belongs_to :machine
    end

    class MachineCosting < ActiveRecord::Base

       attr_accessible :machine_id,
                       :total_cost,
                       :machine_name,
                       :part_costings_attributes

       attr_accessor :machine_name                

       has_many :part_costings, :dependent => :destroy

       accepts_nested_attributes_for :part_costings, :allow_destroy => true    

       def machine_name
         self.machine.try(:name)
       end

    end

    class PartCosting < ActiveRecord::Base
      attr_accessible :part_id,
                      :part_name,
                      :cost

      attr_accessor :part_name

      belongs_to :machine_costing
      belongs_to :part

      def part_name
        self.part.try(:name)
      end
    end

机械费用表

视图/machine\u costings/\u form.html.erb

   <%= simple_form_for(@machine_costing, :html => {:multipart => true}) do |f| %>

     <%= f.input :machine_id, :url => autocomplete_machine_id_machines_path, 
            :as => :autocomplete %>

        <!-- HERE, WHENEVER I SELECT A MACHINE, I WANT TO ADD NESTED-FORMS FOR 
     PARTCOSTINGS CORRESPONDING TO ALL THE PARTS OF THE MACHINE I JUST SELECTED.-->

        <%= f.simple_fields_for :part_costings do |part_costing|%>   
          <%= render 'part_costings/part_costing_fields', :f => part_costing %>
        <% end %>

   <% end %>

请建议在字段中选择机器id后，如何使用javascript填充和动态添加固定数量的零件成本计算字段

我很乐意提供更多的信息

---

再次感谢

首先，总结一下我的方法

在MachineCosting表单中，使用“rails3 jquery autopopulate”gem按机器名称搜索机器。 Hack MachineController还以json格式发送“部件信息”和匹配的机器。 当用户选择机器时，使用javascript为PartCostings添加嵌套的表单，并使用json格式接收的数据部分填充它们。 下面是我如何完成代码部分

视图/machine\u costings/\u form.html.erb

   <%= simple_form_for(@machine_costing, :html => {:multipart => true}) do |f| %>

     <%= f.input :machine_id, :url => autocomplete_machine_id_machines_path, 
            :as => :autocomplete %>

        <!-- HERE, WHENEVER I SELECT A MACHINE, I WANT TO ADD NESTED-FORMS FOR 
     PARTCOSTINGS CORRESPONDING TO ALL THE PARTS OF THE MACHINE I JUST SELECTED.-->

        <%= f.simple_fields_for :part_costings do |part_costing|%>   
          <%= render 'part_costings/part_costing_fields', :f => part_costing %>
        <% end %>

   <% end %>

    <%= simple_form_for(@machine_costing, :html => {:multipart => true}) do |f| %>
        <%= f.error_notification %>

        <%= f.input :machine_name, :url => autocomplete_machine_name_machines_path, 
                  :as => :autocomplete, :input_html => { :id_element   =>  "#machine_costing_machine_id"} %>

        <%= f.association :machine, :as => :hidden %>

        <div id='part_costings'>
          <%= f.simple_fields_for(:part_costings) do |part_costing|%>   
            <%= render 'part_costings/part_costing_fields', :f => part_costing %>
          <% end %> 

          <div class="links hidden">
            <%= link_to_add_association 'Add part costings', f, :part_costings, 
              :partial => 'part_costings/part_costing_fields' %>
          </div>
        </div>

        <%= f.button :submit%>
    <% end %>

    <div class= 'nested-fields'>    
            <!-- DO NOT CHANGE THE ORDER OF ATTRIBUTES ELSE machine_costing.js WILL FAIL -->
           <%= f.input :part_id, :as=> :hidden %>
           <%= f.text_field :part_name, :disabled => 'disabled' %>           
           <%= f.input :cost %>
           <%= link_to_remove_association '<i class="icon-remove"></i>'.html_safe, f ,:class =>"part_costing_remove" %>
    </div> 

routes.rb

  resources :machines  do
      get :autocomplete_machine_name, :on => :collection
  end

javascript解决方案的关键点是

方法绑定'railsAutocomplete.select'，functionevent，来自rail3 jquery自动完成gem的数据

方法绑定“cocoon:after insert”，函数E，cocoon gem的部分成本

就这些。

---

如果你有什么建议，请告诉我。谢谢：

首先，总结一下我的方法

在MachineCosting表单中，使用“rails3 jquery autopopulate”gem按机器名称搜索机器。 Hack MachineController还以json格式发送“部件信息”和匹配的机器。 当用户选择机器时，使用javascript为PartCostings添加嵌套的表单，并使用json格式接收的数据部分填充它们。 下面是我如何完成代码部分

视图/machine\u costings/\u form.html.erb

   <%= simple_form_for(@machine_costing, :html => {:multipart => true}) do |f| %>

     <%= f.input :machine_id, :url => autocomplete_machine_id_machines_path, 
            :as => :autocomplete %>

        <!-- HERE, WHENEVER I SELECT A MACHINE, I WANT TO ADD NESTED-FORMS FOR 
     PARTCOSTINGS CORRESPONDING TO ALL THE PARTS OF THE MACHINE I JUST SELECTED.-->

        <%= f.simple_fields_for :part_costings do |part_costing|%>   
          <%= render 'part_costings/part_costing_fields', :f => part_costing %>
        <% end %>

   <% end %>

    <%= simple_form_for(@machine_costing, :html => {:multipart => true}) do |f| %>
        <%= f.error_notification %>

        <%= f.input :machine_name, :url => autocomplete_machine_name_machines_path, 
                  :as => :autocomplete, :input_html => { :id_element   =>  "#machine_costing_machine_id"} %>

        <%= f.association :machine, :as => :hidden %>

        <div id='part_costings'>
          <%= f.simple_fields_for(:part_costings) do |part_costing|%>   
            <%= render 'part_costings/part_costing_fields', :f => part_costing %>
          <% end %> 

          <div class="links hidden">
            <%= link_to_add_association 'Add part costings', f, :part_costings, 
              :partial => 'part_costings/part_costing_fields' %>
          </div>
        </div>

        <%= f.button :submit%>
    <% end %>

    <div class= 'nested-fields'>    
            <!-- DO NOT CHANGE THE ORDER OF ATTRIBUTES ELSE machine_costing.js WILL FAIL -->
           <%= f.input :part_id, :as=> :hidden %>
           <%= f.text_field :part_name, :disabled => 'disabled' %>           
           <%= f.input :cost %>
           <%= link_to_remove_association '<i class="icon-remove"></i>'.html_safe, f ,:class =>"part_costing_remove" %>
    </div> 

routes.rb

  resources :machines  do
      get :autocomplete_machine_name, :on => :collection
  end

javascript解决方案的关键点是

方法绑定'railsAutocomplete.select'，functionevent，来自rail3 jquery自动完成gem的数据

方法绑定“cocoon:after insert”，函数E，cocoon gem的部分成本

就这些。 如果你有什么建议，请告诉我。谢谢: