Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>First, summary of my approach.</p> <ul> <li>In MachineCosting form, use 'rails3-jquery-autopopulate' gem to search for Machines by their name. </li> <li>Hack MachineController to also send 'Parts info' together with matching machines in json form. </li> <li>When user selects a machine, use javascript to add nested_forms for PartCostings and partially populate them using data recieved in json form.</li> </ul> <p>Now here is how I have done it (code part).</p> <p>views/machine_costings/_form.html.erb </p> <pre><code> &lt;%= simple_form_for(@machine_costing, :html =&gt; {:multipart =&gt; true}) do |f| %&gt; &lt;%= f.error_notification %&gt; &lt;%= f.input :machine_name, :url =&gt; autocomplete_machine_name_machines_path, :as =&gt; :autocomplete, :input_html =&gt; { :id_element =&gt; "#machine_costing_machine_id"} %&gt; &lt;%= f.association :machine, :as =&gt; :hidden %&gt; &lt;div id='part_costings'&gt; &lt;%= f.simple_fields_for(:part_costings) do |part_costing|%&gt; &lt;%= render 'part_costings/part_costing_fields', :f =&gt; part_costing %&gt; &lt;% end %&gt; &lt;div class="links hidden"&gt; &lt;%= link_to_add_association 'Add part costings', f, :part_costings, :partial =&gt; 'part_costings/part_costing_fields' %&gt; &lt;/div&gt; &lt;/div&gt; &lt;%= f.button :submit%&gt; &lt;% end %&gt; </code></pre> <p>views/part_costings/_part_costing_fields.html.erb </p> <pre><code> &lt;div class= 'nested-fields'&gt; &lt;!-- DO NOT CHANGE THE ORDER OF ATTRIBUTES ELSE machine_costing.js WILL FAIL --&gt; &lt;%= f.input :part_id, :as=&gt; :hidden %&gt; &lt;%= f.text_field :part_name, :disabled =&gt; 'disabled' %&gt; &lt;%= f.input :cost %&gt; &lt;%= link_to_remove_association '&lt;i class="icon-remove"&gt;&lt;/i&gt;'.html_safe, f ,:class =&gt;"part_costing_remove" %&gt; &lt;/div&gt; </code></pre> <p>controllers/machines_controller.rb</p> <pre><code> class MachinesController &lt; ApplicationController # OVER RIDING THIS BY OWN METHOD # autocomplete :machine, :name, :full=&gt; true, :extra_data =&gt; [:machine_id] def autocomplete_machine_name respond_to do |format| format.json { @machines = Machine.where("name ilike ?", "%#{params[:term]}%") render json: json_for_autocomplete_machines(@machines) } end end def json_for_autocomplete_machines(machines) machines.collect do |machine| parts = Hash.new unless machine.part_usages.empty? machine.part_usages.each do |part_usage| parts[part_usage.part.id] = part_usage.part.name end end hash = {"id" =&gt; machine.id.to_s, "value" =&gt; machine.name, "parts" =&gt; parts} hash end end # # # end </code></pre> <p>And here is the javascript part.</p> <p>assest/javascripts/machine_costings.js</p> <pre><code> $(function() { // Part Costings var part_id; var part_name; $('#machine_costing_machine_name').bind('railsAutocomplete.select', function(event, data){ console.debug("Machine selected..."); parts = data.item.parts; console.debug("Removing existing part_costings..."); $('.part_costing_remove').click(); console.debug("Adding part_costings..."); for(var id in parts) { part_id = id; part_name = parts[id]; $('.add_fields').click(); } console.debug("Done adding all part_costings..."); }); $('#part_costings').bind('cocoon:after-insert', function(e, part_costing) { part_costing[0].getElementsByTagName('input')[0].value = part_id; part_costing[0].getElementsByTagName('input')[1].value = part_name; console.debug("Added part_costing..."); }); }); </code></pre> <p>routes.rb</p> <pre><code> resources :machines do get :autocomplete_machine_name, :on =&gt; :collection end </code></pre> <p>The critical points in javascript solution are...</p> <ol> <li><p>Method "bind('railsAutocomplete.select', function(event, data)" from rail3-jquery-autocomplete gem.</p></li> <li><p>Method "bind('cocoon:after-insert', function(e, part_costing)" from cocoon gem.</p></li> </ol> <p>That's all. Please let me know if you have some suggestions. Thanks :)</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload