前提・実現したいこと
![
僕は説明するのが難しいと感じたので、写真を貼ってます。やりたいことは投稿フォームのジャンル選択で欲しいジャンルがなかったら、そのジャンルをテキストフィールドで追加できるようにしたいと思っています。そしてそれをajaxでやりたいと思っています。ただそれを投稿フォームの作成の中でできるようにしたいと思っています。ですが、実装の仕方が全然わかりません。
最初にteratailで質問していたので、ジャンル選択の部分は実装できていました。ただ、ただ追加するところは調べてもどうすればいいかわかりません。
アソシエーションなどの説明は説明するよりもコードをみてもらった方が早いと思います。コードは該当箇所のみ記述します。
該当のソースコード
ruby
1コントローラ app/controllers/end_user/posts_controller.rb 2 def new 3 @post = Post.new 4 @genres = Genre.all 5 @genre = Genre.new 6 end 7 8 def create 9 @post = Post.new(post_params) 10 @post.user_id = current_user.id 11 if @post.save 12 flash[:success] = '投稿しました!' 13 redirect_to end_user_posts_path 14 else 15 render action: :new 16 end 17 end 18 19 def add 20 genre = genre.save(genre_params) 21 @genre = Genre.new 22 @genres = Genre.all 23 respond_to do |format| 24 format.html 25 format.js 26 end 27 end 28 29private 30 def post_params 31 params.require(:post).permit(:content, :image,{genre_ids: []}) 32 end 33 34 def genre_params 35 params.require(:genre).permit(:name) 36 end
ruby
1モデル app/models/post.rb 2 has_many :post_genres 3 has_many :genres, through: :post_genres 4 accepts_nested_attributes_for :post_genres
ruby
1モデル app/models/post_genre.rb 2 belongs_to :post 3 belongs_to :genre
ruby
1モデル app/models/genre.rb 2 has_many :post_genre 3 has_many :posts, through: :post_genres 4 validates :name, length: {minimum: 1, maximum: 15}
ruby
1 ビュー app/views/end_user/posts/new.html.erb 2<div class="container"> 3 <div class="row"> 4 <div class="col-sm-8 col-sm-offset-2 form"> 5 <%= form_for @post, url: end_user_posts_path do |f| %> 6 <% if @post.errors.any? %> 7 <%= @post.errors.count %>件のエラーが発生しました。 8 <% @post.errors.full_messages.each do |message| %> 9 <ul> 10 <li><%= message %></li> 11 </ul> 12 <% end %> 13 <% end %> 14 15 <div class="row"> 16 <%= render 'genre' %> 17 </div> 18 <div class="row"> 19 <div class="col-sm-6 col-sm-offset-3"> 20 <%= f.attachment_field :image %> 21 </div> 22 </div> 23 <br> 24 <div class="row"> 25 <div class="col-sm-6 col-sm-offset-3"> 26 <%= f.text_area :content, class:"form-control", rows:"3", placeholder:"コメントここに" %> 27 </div> 28 </div> 29 <hr> 30 <div class="row"> 31 <div class="col-sm-6 col-sm-offset-3"> 32 <%= f.submit "投稿", class:"btn btn-primary btn-block" %> 33 </div> 34 </div> 35 <% end %> 36 </div> 37 </div> 38</div>
ruby
1パーシャル app/views/end_user/posts/_genre.html.erb 2<div id="genre_form"> 3 <%= f.field model: @genre, remote: true do |f| %> 4 <%= f.text_field :name %> 5 <% end %> 6 <div class="col-sm-6 col-sm-offset-3 form-group" > 7 <%= f.label :genres, class:'control-label' %> 8 <div class="checkbox"> 9 <%= f.collection_check_boxes(:genre_ids, @genres, :id, :name) do |g| %> 10 <%= g.check_box + g.text %> 11 <% end %> 12 </div> 13 </div> 14</div>
javascript
1 app/views/end_user/posts/add.js.erb 2$(#genre_form).html("<%= escape_javascript(render("genre"))");
ruby
1ルーティング 2resources :posts, only: [:index, :new, :create] 3get 'posts/new', to: 'posts#add', as: 'genre'
試したこと
調べてみて、これかなと思ったのが collection_check_boxesとaccepts_nested_attributes_forとf.field_forを使ったフォームだと思いました。ですが、実装の仕方が全然わかりません。
補足情報(FW/ツールのバージョンなど)
バージョン
rails: 5.2.3
ruby: 2.5.5
gemの種類
gem 'bootstrap-sass', '> 3.3.6'> 1.1.1'
gem 'jquery-rails'
gem 'paranoia'
gem 'refile', require: "refile/rails", github: 'manfe/refile'
gem 'refile-mini_magick'
gem 'kaminari','
gem 'devise'
gem 'pry-rails'