[Rails 6] cocoon_ introduction

Development environment

table of contents __1) How to install cocoon

  1. Introducing jQuery If you haven't done so yet
  2. Introducing cocoon yarn add github: nathanvda / cocoon # c24ba53 command
  3. Write in application.js >> import "cocoon";
  1. Dynamically add forms * Chikajika will be UP
  2. Give id and data attributes to the added form __

1) How to install cocoon

1. Introducing jQuery

__ If you haven't done so yet __

2. Introduction of cocoon


gem 'cocoon'
* Don't forget to restart the server with bundle install *
*I haven't been able to experiment, but I think it's okay if you don't write it in the gemfile (below)."yarn add"Because I am doing it. )*


yarn add github:nathanvda/cocoon#c24ba53

It is OK if the following description is added to package.json after execution.


"cocoon": "github:nathanvda/cocoon#c24ba53"

__ * Note: The Official Repository __ only describes how to install up to Rails 5. Therefore, although it is officially described as "yarn add @ nathanvda / cocoon", please note that it will not be added correctly unless it is the above command. __ ** About the reason why you have to add "# c24ba53" after cocoon __

2. Described in application.js


require('jquery') //It depends on jQuery, so it won't work without it
import "cocoon"   //Description for running cocoon

__ * Supplement: __ "require (" @ nathanvda / cocoon ")" in the explanation of the official website ← If you use this description together, two forms will be added dynamically when you click the button, so do not use it together Please be careful. I haven't tried it, but I think it works either way.

__ Installation is complete above. __

2) Dynamically add forms

Until you write the article I will post the article that I referred to when introducing it.

References Quitta Rails6 cocoon introduction: https://qiita.com/ashketcham/items/87e3db665ca9c66ce673 2020-06-27 slim I'm using: https://k-koh.hatenablog.com/entry/2020/06/27/125710 Qitta Gif video available: https://qiita.com/ohnitakahiro/items/dd0e44a7ebbaa6bf5ab8 Qitta Parents, children, grandchildren: https://qiita.com/hitochan/items/5a45a95e644492d66160 Rails Application Build Guides:https://rails.densan-labs.net/form/relation_register_form.html    that's all.

Recommended Posts

[Rails 6] cocoon_ introduction
[Rails] Introduction of PAY.JP
[Rails] devise introduction method
[Rails] Introduction of devise Basics
[Rails] Add / Remove Forms (cocoon)
Introduction to RSpec-Everyday Rails Summary-
[Rails] Introduction of Rubocop by beginners
Rails book review app RSpec introduction
[Rails] RSpec Kihon no Ki [Introduction]
[Introduction to Rails] form_with (local: true)
[Introduction to Rails] How to use render
[Ruby on Rails] Introduction of initial data
[Rails g.error]
Introduction (self-introduction)
Rails basics
Rails Review 1
[Rails] first_or_initialize
rails tutorial
About Rails 6
Rails foundation
Rails memorandum
rails tutorial
rails tutorial
rails tutorial
[Rails] devise
[Java] Introduction
Introduction (editing)
rails tutorial
rails tutorial
Rails Tips
rails method
rails tutorial
[Vue.js] Implementation of menu function Vue.js introduction rails6
[Rails] ActiveRecord
[Rails] form_with
Rails Review 2
[Rails] Introduction of pry-rails ~ How to debug binding.pry
[Ruby on Rails] Until the introduction of RSpec
[Ruby on Rails] Select2 introduction memo for Webpacker