コメント機能非同期

はじめに

コメント機能の非同期通信化を実装していきます。

実装手順

1. コメントの部分を部分テンプレート化
2. サーバーからのレスポンスでコメント一覧のテンプレートを返す
3. コメントの投稿後、コメントフォームの値に前回の投稿が残らないようにすること
4. form_withを使うこと

部分テンプレート

まずはいいね機能と同様link_to部分に、
remote:true, data: {"turbolinks" => false}を追記

post_comments/_index.html.erb

<%= link_to "削除", post_post_comment_path(post_comment.post, post_comment), method: :delete,remote:true, data: {"turbolinks" => false}, data: {confirm: "本当に削除しますか？"}, class: "btn btn-sm " %>

コメント投稿フォーム
form_withにlocal: falseを追記

post_comments/_form.html.erb

<%= form_with model: [ book, post_comment ], local: false do |f| %>

idを付与する

renderを記述するときidをつける。

<div  id="post-comments">
              <%= render "public/post_comments/index", post: @post %>
</div>

コントローラ

リダイレクト先を削除しましょう。

js作成

destroy.js.erb

$('#post-comments').html("<%= j(render "post_comments/show", post: @post) %>");

create.js.erb

$('#post-comments').html("<%= j(render "post_comments/show", post: @post) %>");
$("textarea").val('');

jqueryの基本形

$(“セレクタ”).メソッド(“パラメータ[引数]”);

$(“”)の部分にidを入れることでそこの部分を呼び出し、
.html("");の部分で、htmlに対して何をするかを（）内に記述してく。

$("textarea").val('');はコメントを空にするという意味.