Problems with nested forms
I am trying to create a fully managed website where the user can fill in some skills ("css", "php", "ruby" you name it). Next to it, they fill in how well they think with it, as a percentage.
I'm going to display the result in graphs, but right now I'm stuck with this nested form, I can't seem to get them to display.
So, as I said earlier, you can add your skills in the settings page, so this is how I linked them:
skill.rb and setting.rb
class Skill < ApplicationRecord
belongs_to :settings, optional: true
end
class Setting < ApplicationRecord
has_many :skills, dependent: :destroy
accepts_nested_attributes_for :skills, allow_destroy: true,
reject_if: proc { |att| att['name'].blank? }
# Other lines...
ApplicationHelper.rb
def link_to_add_row(name, f, association, **args)
new_object = f.object.send(association).klass.new
id = new_object.object_id
fields = f.fields_for(association, new_object, child_index: id) do |builder|
render(association.to_s.singularize, f: builder)
end
link_to name, '#', class: 'add_fields' + args[:class], data: { id: id, fields: fields.gsub('\n', '') }
end
application.js
$(document).on('turbolinks:load', function() {
$('form').on('click', '.remove_skill', function(event) {
$(this).prev('input[type="hidden"]').val('1');
$(this).closest('div').hide();
return event.preventDefault();
});
$('form').on('click', '.add_fields', function(event) {
let regexp, time;
time = new Date().getTime();
regexp = new RegExp($(this).data('id'), 'g');
$('.skills').append($(this).data('skills').replace(regexp, time));
return event.preventDefault();
});
});
view / settings / _form.html.erb
<!-- Some other fields -->
<table>
<thead>
<tr>
<th></th>
<th>Compétence</th>
<th>Maîtrise</th>
</tr>
</thead>
<tbody class="fields">
<%= fields_for :skills do |builder| %>
<%= render 'skill', f: builder %>
<% end %>
<%= link_to_add_row('Ajouter skill', f, :skills, class: 'add_skill') %>
</tbody>
</table>
<!-- Some other fields -->
** views / settings / _skill.html.erb
<tr>
<td>
<%= f.input_field :_destroy, as: :hidden %>
<%= link_to 'Delete', '#', class: 'remove_record' %>
</td>
<td><%= f.input :name, label: false %></td>
<td><%= f.input :completed, label: false %></td>
<td><%= f.input :due, label: false, as: :string %></td>
</tr>
I followed this video and while I click "add skill" I can see my nested form showing up in my rails console but that's it.
I think this is just what I haven't seen, but I repeat the tutorial twice and each time is a little different, but shows nothing when I click "add skill".
Any help is appreciated!
source to share
Several things to look at. first, this function:
$('form').on('click', '.add_fields', function(event) {
let regexp, time;
time = new Date().getTime();
regexp = new RegExp($(this).data('id'), 'g');
$('.skills').append($(this).data('skills').replace(regexp, time));
return event.preventDefault();
});
Looks for an element with class 'skills' on it and adds entries there. I haven't seen the item with it above unless I missed it.
Then try disabling turbolinks, at least when debugging - I've had problems with this before.
- Remove the "turbolinks" gem line from your Gemfile.
- Remove // = require turbolinks from your app /assets/javascripts/application.js.
- Remove the two "data-turbolinks-track" => true hash key / value pairs from your app /views/layouts/application.html.erb.
(from blog.steveklabnik.com/posts/2013-06-25-removing-turbolinks-from-rails-4
After that, drop the pack
console.log()
for checking the expected values are what you expect, the elements exist, etc. at run time.
Finally, I have a post about something similar: Nested Javascript forms for has_many relationships Which might be helpful.
source to share