How to use cocoon gem in Rails 7?

The Cocoon gem is a powerful tool that simplifies the management of nested forms in Rails applications. With Cocoon, you can easily handle dynamic additions and removals of nested form fields, providing a seamless user experience. In this article, we will explore how to utilize the Cocoon gem in a Rails 7 application through a practical example.

Installing and Setting Up the Cocoon Gem

To begin, let’s install and configure the Cocoon gem in a Rails 7 application.

Add the Cocoon gem to your Gemfile:

gem ‘cocoon’

Run the bundle command to install the gem:

bundle install

Require Cocoon in your JavaScript manifest file (app/javascript/packs/application.js):

//= require cocoon

Ensure that you have jQuery installed. If not, add it to your Gemfile:

gem ‘jquery-rails’

Configure jQuery in your application by adding the following line to your JavaScript manifest file:

//= require jquery3

Implementing Nested Forms with Cocoon

Let’s assume we have a simple Rails application that models a blog post and its associated comments. We will use Cocoon to manage the creation and removal of comments within the blog post form.

Set up the associations:

# app/models/post.rb
class Post < ApplicationRecord
has_many :comments
accepts_nested_attributes_for :comments, allow_destroy: true
end

#app/models/comment.rb
class Comment < ApplicationRecord
belongs_to :post
end

Build the nested form in the post form view:

# app/views/posts/_form.html.erb
<%= form_with(model: post) do |f| %>
<%= f.label :title %>
<%= f.text_field :title %>
<%= f.fields_for :comments do |comment_fields| %
<%= render ‘comment_fields’, f: comment_fields %>
<% end %>

<%= link_to_add_association ‘Add Comment’, f, :comments %>
<%= f.submit %>
<% end %>

Create a partial for the comment fields:

# app/views/posts/_comment_fields.html.erb
<div class=”nested-fields”>
<%= f.label :content %><%= f.text_field :content %>
<%= link_to_remove_association ‘Remove Comment’, f %>
</div>

Add the necessary JavaScript to enable Cocoon functionality:

// app/javascript/packs/application.js
$(document).on(‘turbolinks:load’, function() {
$(‘.nested-fields’).cocoon();
});

Working with Nested Forms Using Cocoon

Now that we have implemented the necessary configurations, let’s see Cocoon in action.

1. When you load the blog post form, you will see the “Add Comment” link.
2. Clicking on “Add Comment” will dynamically add a new set of comment fields to the form.
3. To remove a comment, click on the “Remove Comment” link associated with that comment.
4. When the form is submitted, the post and its associated comments will be saved to the database.

Conclusion: 

The Cocoon gem simplifies the handling of nested forms in Rails 7 applications. By following the steps outlined in this article, you can seamlessly manage dynamic additions and removals of nested form fields, improving the user experience. Incorporate Cocoon into your Rails projects to efficiently handle complex forms and enhance data management. Experiment with its various options and customization features to suit your specific requirements. Are you searching for a reliable partner to handle your Rails development needs? Look no further. RailsCarma offers comprehensive Rails development services that encompass everything from initial design to deployment and maintenance.