accepts_nested_attributes_fields not showing for join table - ruby-on-rails

Question

I have the following tables
class Region < ActiveRecord::Base
has_many :companies, through: :companies_regions
has_many :companies_regions, :dependent => :destroy
end
class Company < ActiveRecord::Base
has_many :regions, through: :companies_regions
has_many :product_type, dependent: :destroy
has_many :companies_regions, :dependent => :destroy
accepts_nested_attributes_for :companies_regions, :allow_destroy => true
end
class CompaniesRegion < ActiveRecord::Base
belongs_to :company
belongs_to :region
end
I want to create a new company and i want to be able to add a new region accordingly to the CompaniesRegion table.
form.html.erb
<%= simple_form_for(['admin', #company]) do |f| %>
<%= f.error_notification %>
<div class="form-group">
<%= f.input :name %>
</div>
<div>
<div class="row">
<div class="col-md-12">
<h4>Basic Coverages</h4>
<div class="row form-group">
<label class="col-md-1">#</label>
<label class="col-md-3">Coverage</label>
<label class="col-md-1">Description</label>
</div>
<div>
<%= f.simple_fields_for :companies_regions do |company_region| %>
<%= render 'company_region', f: company_region %>
<% end %>
<%= link_to_add_association 'New Region', f, :companies_regions, partial: 'company_region' %>
</div>
</div>
</div>
<div class="form-actions">
<%= f.button :submit %>
</div>
<% end %>
_company_region.html.erb
<div class="nested-fields form-group row">
<div class="col-md-1"></div>
<div class="col-md-3">
<%#= f.select :region_id, class: 'form-control', placeholder: 'Region' %>
<%= f.input_field :region_id, collection: ['Asia', 'America'], class: 'form-control', prompt: 'Please Select' %>
</div>
<div class="col-md-1">
<%= link_to_remove_association(f, title: 'Remove') do %>
<span class="glyphicon glyphicon-remove"></span>
<% end %>
</div>
</div>
The problem here is that when i click the New Region link, i am expecting it to display the details in the _company_region.html.erb but unfortunately it doesnt.
Nothing shows. It doesnt display any data. It however refreshes the page which is absurd.
Dont know if it is because my table is a join table hence the problem or if there is something else that i am missing but based on documentation, this should be fine and should work.
Any help is deeply appreciated

Answer 1

Its a very common misconception that you need to use nested attributes to set assocations. You don't. Rails generates a regions_ids= setter for the association that can be hooked up with checkboxes or a select tag.
All you really need with SimpleForm is:
<%= f.association :regions %>
See the docs for ActionView::Helpers::FormOptionsHelper and associations in SimpleForm for more details on how this works.
<%= simple_form_for(['admin', #company]) do |f| %>
<%= f.error_notification %>
<div class="form-group">
<%= f.input :name %>
</div>
<div>
<div class="row">
<div class="col-md-12">
<h4>Basic Coverages</h4>
<div class="row form-group">
<label class="col-md-1">#</label>
<label class="col-md-3">Coverage</label>
<label class="col-md-1">Description</label>
</div>
<div>
<%= f.association :regions %>
</div>
</div>
</div>
<div class="form-actions">
<%= f.button :submit %>
</div>
<% end %>
The only reason you would need to use nested attributes is if the user must be able to create regions in the same request. But usually its better to use ajax to handle those cases.

Answer 2

Your code looks fine. The behaviour you describe seems to indicate that the cocoon.js code is not included/loaded correctly? Did you
add require 'cocoon' in application.js ?
did you include application.js in your html?