非同期通信を実装したが、リロードが必要になってしまう

Question

前提・実現したいことs

ここに質問の内容を詳しく書いてください。
Ruby(rails)で電子連絡帳を作っています。
ajaxでの非同期通信機能を実装中ですが、リロードをしないと投稿データが反映されません。
いろいろなサイトで検索しましたが、変化なしです。
非同期通信できるようにしたいです。

該当のソースコード

Rails.application.routes.draw do
  devise_for :users
  root to: "home#top"
  resources :diaries do
    resources :comments, only: :create
  end
  resources :users, only: [:show, :edit, :update]
end

class DiariesController < ApplicationController
  def index
    @diaries = Diary.all
  end

  def new
    @diary = Diary.new
  end

  def create
    @diary = Diary.new(diary_params)
    if @diary.save
      redirect_to root_path
    else
      render :new
    end
  end

  def show
    @diary = Diary.find(params[:id])
    @comment = Comment.new #①
    @comments = @diary.comments #②
  end

  def edit
    @diary = Diary.find(params[:id])
  end

  def update
    @diary = Diary.find(params[:id])
    if @diary.update(diary_params)
      redirect_to root_path
    else
      render :edit
    end
  end

  def destroy
    @diary = Diary.find(params[:id])
    @diary.destroy
    redirect_to root_path
  end

  private
  def diary_params
    params.require(:diary).permit(:diary_day, :title, :diary, :image).merge(user_id: current_user.id)
  end
end

<h2 class="page-heading">
  <%= @diary.diary_day %>
</h2>
  <div>
    <%= image_tag @diary.image ,class:"item-box-img" %>
  </div>
    <table class="table">
        <tbody>
          <tr>
            <th class="table__col1">日記</th>
            <td class="table__cal3"><%= @diary.title %></td>
            <td class="table__col2"><%= @diary.diary %></td>
          </tr>
        </tbody>
    </table>

  <div>
    <h4>コメント</h4>
    <div id="comments_area"><!-- #① -->
      <!-- 投稿されたコメント一覧をブログの詳細ページに表示するためのrender -->
      <%= render partial: 'comments/index', locals: { comments: @comments } %>
    </div>  
    <% if user_signed_in? %>
      <!-- コメント入力欄をブログの詳細ページに表示するためのrender -->
      <%= render partial: 'comments/form', locals: { comment: @comment, diary: @diary } %>
    <% end %>
  </div>

     
  <div>
    <%= link_to "編集する", edit_diary_path(@diary) %>
    <%= link_to "削除する", diary_path(@diary), method: :delete %>
  </div>

class CommentsController < ApplicationController

  def create
    @diary = Diary.find(params[:diary_id]) #①
    @comment = @siary.comments.build(comment_params) #②
    @comment.user_id = current_user.id #③
    if @comment.save
      render :index #④
    end
  end


  private
    def comment_params
      params.require(:comment).permit(:comment, :diary_id, :user_id)
    end
end

<% comments.each do |comment| %>
  <% unless comment.id.nil? %>
    <p><%= link_to "#{comment.user.nickname}さん", user_path(comment.user.id) %></p>
    <p>コメント：<%= comment.comment %></p>
  <% end %>
<% end %>

<%= form_with(model: [diary, comment] ) do |form| %>
  <div>
    <%= form.text_area :comment %>
  </div>
  <div class="actions">
    <%= form.submit "コメントをする" %>
  </div>
<% end %>

$("#comments_area").html("<%= j(render 'index', { comments: @comment.diary.comments }) %>")
$("textarea").val('')

初学者で拙いコードではありますが、どなたか教えていただければ幸いです。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

jQueryのインストールをしたら実装できました！