Rails 3 - nested_form gem nested:fieldAdded appears not to triggered

Question

I'm using the nested_form gem which works great until I try to implement a jquery call based on the github example for a nested:fieldAdded event. Here is the relevant view code:

<table class="table table-striped table-hover" id="details" >
    <th>Material</th>
    <th>Current Balance (lbs)</th>  
    <th>Net Weight</th>
    <th>Gross Weight</th>
    <th></th>       

    <%= f.fields_for :downstreamDetails, :wrapper => false do |dd| %>


    <tr class="fields">
    <td><%= dd.select :tb_product_type_id, options_from_collection_for_select( @productTypes, :id, :product_type, dd.object.tb_product_type_id), { :prompt => "Select Material"} , {:class =>"form-control col-sm-2" , :data => { remote: true, :url => getInventoryData_path(:location_id => @downstream.from_company_location_id) }  }   %></td>  
    <td nowrap="true"><%= dd.text_field :currentBalance, :value => (number_with_delimiter(dd.object.currentBalance)), :readonly => true, :class => "form-control"  %> </td>

    <td><%= dd.text_field :ship_total_net_weight, :value => (number_with_precision(dd.object.ship_total_net_weight, precision: 2)), :class =>"form-control col-sm-2" %></td>
    <td><%= dd.text_field :ship_total_gross_weight, :class =>"form-control col-sm-2" %></td>
    <td><%= dd.link_to_remove "Remove", :data => {:target => "#details"}, :class => "btn btn-primary btn-small btn-block" %></td>
    </tr>       

    <% end %>
</table>
</div>

<div class="row">   
<div class="col-md-2"><%= f.link_to_add "Add Material" ,:downstreamDetails, :data => {:target => "#details"}, :class => "btn btn-primary btn-small btn-block" %></div>  
</div>

To to handle a "nested:fieldAdded:details" jquery call I added the following to my application.js file:

$(document).on('nested:fieldAdded:details', function(event){
  // this field was just inserted into your form
  var selected = field.find("option:selected");

  alert(selected);

});

This worked fine and I got an alert when I hit the "Add" Link. I want to check all previous detail fields and remove the selected options from the new detail field select box. Since I'm new to jquery/js I did a bit of hacking tried and added a few line of code to the app.js method I thought would accomplish my goal. They didn't work and the alert failed to trigger.

Now that I have reverted back to the original app.js method code, I still can't get the the alert to trigger. Setting breakpoints in the file with Safari and Firefox dev tools doesn't work, they never hit when I click "Add". I also cleared my browser cache and restarted the server multiple times but still cannot recreate my initial test where I got the alert to trigger. Why wouldn't the event trigger when it originally did? Any help would be greatly appreciated, thx!

Answer 1

Ok, I found the issue. When I reverted the application.js file back to the original code that was working I missed one statement:

var field = event.field;

So my full .js should have been:

$(document).on('nested:fieldAdded', function(event){
  // this field was just inserted into your form
  var field = event.field; 
  // it's a jQuery object already! Now you can find date input
  var selected = field.find('option:selected').text();
  alert(selected);
});