Issues with nested forms

Question

I'm trying to create a fully manageable website where the user can fill some skills ('css', 'php', 'ruby', you name it). Next to it, they fill how good they think they are with this, in a percentage.

I intend to display the result in graphs but right now I'm stuck with this nested form, I can't make them show up.

So as I said earlier, you can add your skills in a page named settings, so here is how I linked them together:

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();
    });
});

views/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's instruction, and so far when I click on "add skill", I can see my nested form being rendered in my rails console, but that's all.

I think this is just something I didn't see, but I redid the tutorial twice and each time a bit different but nothing shows when i click on "add skill".

Any help is welcomed!

Answer 1

A few 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();
});

Is looking for an element with a 'skills' class on it and will append the records there. I didn't see an element with it above unless I missed it.

Next, try disabling turbolinks, at least when debugging - I have had problems with that before.

1. Remove the gem 'turbolinks' line from your Gemfile.
2. Remove the //= require turbolinks from your app/assets/javascripts/application.js.
3. 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, throw in a wad of

console.log() 

statements in to verify expected values are what you expect, elements exist etc at runtime.

Finally, I have a post about something similar here: Javascript nested forms for has_many relationships Which might be of use.