[ruby on rails]コメント機能の非同期通信

初めに

プログラミン初めて１ヶ月と少しですのでご注意ください。。

コメントの非同期通信

まず、いいねはこちらの記事を参考にすんなりできました！

コメントも同様に〜と思ったのですが、案外つまづいたのでまとめます。
大体は、いいね　と同じなので違うところだけ記載してこうと思います。

まずやったこと　　 「いいね」の知識でいける部分

①コメント部分の部分テンプレート化する。
②本のshowページから、renderさせる。

books/show.html.erb

<div id="comments-area"><%= render "book_comments/comment",books: @books,book_comment: @book_comment %></div>

非同期通信の時は、idをつけてあげる。（idでなくてもcss記述するときみたいな識別できる何か）

③viewのbook_commentsフォルダ内にアクション名と同じjsファイル作成する。

④jsファイルの中身記述。

books/create.js.erb

$("#comments-area").html("<%= j(render 'book_comments/comment', books: @books,book_comment: @book_comment) %>")

comments-areaは、booksのshowページで指定したidを持ってきています。

⑤book_commentsコントローラー内のrenderやらredirect　toは消す。
これで、jsファイルを探してくれるようになる。

⑥コメント削除する"Destroy"の<%= link_to のところに、remote: trueを追記します！！これ忘れずに！！

_comment.html.erb

<td><%= link_to "Destroy", book_book_comment_path(book_comment.book, book_comment), method: :delete,remote: true,class:"btn btn-danger" %></td>

form_withを非同期通信に

⑦form_withのlocal trueを消す。

local true消すか、remote true追記するかで、非同期通信になるようです。

_comment.html.erb

<%= form_with(model:[books, book_comment], remote: true) do |f| %>
  <%= f.text_area :comment, rows:'5',placeholder: "コメントをここに",class:"form-control" %>
  <%= f.submit "送信する" %>
 <% end %>

ここから・・・つまずき　始める

books/create.js.erb

$("#comments-area").html("<%= j(render 'book_comments/comment', books: @books,book_comment: @book_comment) %>")

create.js.erbで@books @book_commentをわたしているので、book_commentsコントローラーでこの値を定義しないといけないんですよね・・・。

現状・・・

def create
   book = Book.find(params[:book_id])
   comment = current_user.book_comments.new(book_comment_params)
   comment.book_id = book.id
   comment.save
end

  def destroy
    BookComment.find_by(id: params[:id], book_id: params[:book_id]).destroy
  end
:
:

こうする！

class BookCommentsController < ApplicationController

def create
   book = Book.find(params[:book_id])
   comment = current_user.book_comments.new(book_comment_params)
   comment.book_id = book.id
   comment.save
   @books=Book.find(params[:book_id])
   @book_comment = BookComment.new
end

 def destroy
  @books=Book.find(params[:book_id])
  @book_comment=BookComment.find_by(id: params[:id], book_id: params[:book_id])
  @book_comment.destroy
  @book_comment = BookComment.new
  end

  private

  def book_comment_params
    params.require(:book_comment).permit(:comment)
  end
end

何を渡せばいいんだと思ってしまったんですが、そもそもbooksのshowページから、
renderしてるので、同じ値渡せばいいだけ　なんですよね。なのでコピペしました。
destroyあくしょんで@book_comment = BookComment.newとしてるのは、投稿が残らないようにするためです。

books_controller.rb

def show
    @books=Book.find(params[:id])
    @book=Book.new
    @book_comment = BookComment.new
  end

終わり

jsファイルに渡す値が間違っていたりすると、うまくいきませんので、要注意！！