Rails Dynamic Forms with Cascading Select - ruby-on-rails

Question

I am trying to implement some nested form elements that have values based on a select box value in the main form. As it stands right now when I make the selection in the main form it changes the values displayed in all currently displayed nested form, but when I click the button to add a new nested form element, the new form elements display values that are not based on the primary select. What I need is for any time the button is clicked to add a new nested form, the values in that form should be based on the select box in the main form.
Here are the steps and what is happening:
Here are the steps and the desired results:
Here is what my partial looks like. This is what is displayed when the "new" button is clicked:
<tr class="details_row nested-fields">
<td><%= f.select :area_id, options_for_select(#areas.collect {|c| [ c.area_name, c.id ] }), {include_blank: true}, {:class => 'form-control area_select'} %></td>
<td><%= f.select :product_id, options_for_select(#products.collect {|p| [ p.product_number, p.id ] }), {include_blank: true}, {:class => 'form-control product_select'} %></td>
<td><%= f.number_field :quantity, class: 'form-control', "min" => 1 %></td>
<td><%= f.select :accessory_id, options_for_select(#accessories.collect {|p| [ p.product_number, p.id ] }), {include_blank: true}, {:class => 'form-control accessory_select'} %></td>
<td><%= f.text_field :notes, class: 'form-control' %></td>
<td><%= link_to_remove_association '<i class="fa fa-trash"></i>'.html_safe, f %></td>
</tr>
All of this action is when I'm creating a new record, here is the code from my controller for the new method:
def new
if current_user
#estimate = Estimate.new
#estimate.estimate_details.build
#default_user = current_user.id
#product_type = 3
#areas = Area.where("product_type_id = ?", #product_type)
#products = Product.select("product_number, id").where("product_type_id = ? AND active = 't' ", #product_type)
#accessories = Product.select("product_number, id").where("product_type_id = ? AND active = 't' AND accessory = 't'", #product_type)
else
redirect_to root_path, notice: 'You are not logged in.'
end
end
This is the method from the controller (the same controller as new above) that updates the select boxes:
def update_select
#product_type = params[:product_type_id]
#areas = Area.where("product_type_id = ?", params[:product_type_id])
#products = Product.where("product_type_id = ? AND active = 't'", params[:product_type_id])
#accessories = Product.where("product_type_id = ? AND active = 't' AND accessory = 't'", params[:product_type_id])
respond_to do |format|
format.js
end
end
I was thinking that #product_type would be set to the default in the "new" method of the controller. When the update_select method is run, it should update the #product_type and this would be used when the new elements were created...but that didn't work.
Update
Here is my update_select.js. This does update the three select boxes in the nested form, but I have to add a dynamic form and then make a selection in the main form select box in order for the fields to be correct for the newly added form details.
$(".area_select").empty().append("<%= escape_javascript(render(partial: "select_boxes/area", collection: #areas)) %>")
$(".product_select").empty().append("<%= escape_javascript(render(partial: "select_boxes/product", collection: #products)) %>")
$(".accessory_select").empty().append("<%= escape_javascript(render(partial: "select_boxes/accessory", collection: #accessories)) %>")
Here are the partials referenced by the above js:
Accessory:
<option value="<%= accessory.id %>"><%= accessory.product_number %></option>
Product:
<option value="<%= product.id %>"><%= product.product_number %></option>
Area:
<option value="<%= area.id %>"><%= area.area_name.titleize %></option>
And just for good measure here is the script that triggers the update_select
$ ->
$(document).on 'change', '#product_type_select', (evt) ->
$.ajax
url:'/estimates/new/update_select',
type: 'GET',
dataType: 'script',
data: {
product_type_id: $("#product_type_select option:selected").val()
}
error: (jqXHR, textStatus, errorThrown) ->
console.log("AJAX Error: #{textStatus} #{errorThrown}")
success: (data, textStatus, jqXHR) ->
console.log("Dynamic area select OK!")