Can't get cocoon to work on Ruby on Rails 4

Question

I've been battling trying to get this working for the last few hours, and I just can't for some reason. I've followed the steps almost exactly as indicated on the github repository link.

I created a new application using all of the following steps:

# rails new demo_app
# cd demo_app/
+++ added gem 'cocoon' to the Gemfile
+++ added //= require cocoon to the application.js file
# rails g scaffold Project name:string description:string
# rails g model Task description:string done:boolean project:belongs_to
+++ added has_many :tasks to the Project model
+++ added :_destroy to the permit in my projects_controller.rb file
# bundle install

Here is my views/projects/_form.html.erb file:

<%= form_for(@project) do |f| %>
  <% if @project.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@project.errors.count, "error") %> prohibited this project from being saved:</h2>

      <ul>
      <% @project.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= f.label :name %><br>
    <%= f.text_field :name %>
  </div>
  <div class="field">
    <%= f.label :description %><br>
    <%= f.text_field :description %>
  </div>
  <%= f.fields_for :tasks do |task| %>
    <%= render 'task_fields', :f => task %>
    <%= link_to_add_association 'Add task', f, :tasks, class: "links" %>
  <% end %>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

Now here's my views/projects/_task_fields.html.erb file:

 <div id="nested-fields">
  <div class="field">
      <%= f.label :description %><br>
      <%= f.text_field :description %>
  </div>

  <div class="field">
      <%= f.label :description %><br>
      <%= f.text_field :description %>
  </div>
  <%= link_to_remove_association 'remove task', f %>
 </div>

Is this not exactly what the guide mentions? When I go to create a new project, it shows nothing but the default Name label, name text box, description label, description textbox, and the "create project link". Here's the HTML output of the new project form:

<!DOCTYPE html>
<html>
<head>
  <title>DemoApp</title>
  <link data-turbolinks-track="true" href="/assets/projects.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/scaffolds.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />
  <script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/projects.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/cocoon.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>
  <meta content="authenticity_token" name="csrf-param" />
<meta content="uIpLnix47UNaBONCR+0SV/uz1uiulU6BHqKe5qENzHQ=" name="csrf-token" />
</head>
<body>

<h1>New project</h1>

<form accept-charset="UTF-8" action="/projects" class="new_project" id="new_project" method="post"><div style="display:none"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="uIpLnix47UNaBONCR+0SV/uz1uiulU6BHqKe5qENzHQ=" /></div>

  <div class="field">
    <label for="project_name">Name</label><br>
    <input id="project_name" name="project[name]" type="text" />
  </div>
  <div class="field">
    <label for="project_description">Description</label><br>
    <input id="project_description" name="project[description]" type="text" />
  </div>
    <div class="actions">
    <input name="commit" type="submit" value="Create Project" />
  </div>
</form>

<a href="/projects">Back</a>


</body>
</html>

Can someone please assist me with this? It looks like I'm doing everything as mentioned in the guide, and I'm not getting anything out of this.

score 11 · Accepted Answer · answered Oct 13 '14 at 19:13

11

The link_to_add_association should be located outside the fields_for tag, whatever is inside it will be replicated for each task added and you generally only want a link to add at the end, also nothing shows because no task is instantiated, in order to instantiate one you either click the link_to_add_association or instantiate them on the projects form creation, this can be done at the projects controller new action by doing

#projects_controller.rb
def new
    @project = Project.new 
    @projet.tasks.build
end

You can also instantiate multiple tasks on form creation here by doing some loop like

3.times do
  @project.tasks.build
end

answered Oct 13 '14 at 19:13

Marcelo Risoli

792
7
24

Thanks. Quick question though. you said "you either click the link or instantiate them". How and where do I click this link though? It never shows up on the form to begin with. Does this mean that instantiating is the only option here? – LewlSauce Oct 13 '14 at 19:14
1

The add link does not show up because it is inside the `fields_for` tag, by placing it inside the tag, it shows up once per instance of the tasks model, which in this case is zero because no tasks have been created, this is why you should preferably place it outside the `fields_for` tag, unless you want to have an add link per task – Marcelo Risoli Oct 13 '14 at 19:17
Hmm. Now when I take it outside of the fields_for tag, I get this error, which occurs inside of the task_fields form partial. "undefined method `new_record?' for nil:NilClass" and "<%= link_to_remove_association 'remove task', f %>" is highlighted. Any ideas on this? Thanks so much for your help thus far. – LewlSauce Oct 13 '14 at 19:19
Did you place the `link_to_remove_association` outside `fields_for` also? The link to remove must remain inside the `fields_for` tag because it is related to the task which you need to remove, the add association is not – Marcelo Risoli Oct 13 '14 at 19:23
Nope. the link_to_remove_association is still in in the form partial, which is inside fields_for. – LewlSauce Oct 13 '14 at 19:24
Do you have `//= require cocoon` in your `application.js` file? – Marcelo Risoli Oct 13 '14 at 19:28
Yep I do. That's one of the first things I added. – LewlSauce Oct 13 '14 at 19:29
1

How about the accepts_nested_attributes_for in the projects model? – Marcelo Risoli Oct 13 '14 at 19:34
Ahh, that did it for me. Now I just need to troubleshoot why the remove_association link isn't removing the task when I click on the link. Thanks for all of your help :) – LewlSauce Oct 13 '14 at 19:37
@LewlSauce: I am facing the similar issues and not sure why it is not showing. I have has_may :through relationship and the form is not showing at all. – Qaiser Wali Jun 10 '15 at 09:58
For removing fields, you need to specify `class="nested-fields"` not `id="nested-fields"` – Ryan H. Aug 18 '15 at 08:59

Can't get cocoon to work on Ruby on Rails 4

1 Answers1

Linked