Comment function (Ajax) implementation

I will put it together for myself.

Implementation

** Controller model created **

routes.erb

  resources :posts do
    resources :comments, only: [:create, :destroy]
  end

Since comments are posted, listed, deleted, etc. on the show page of posts, only create and destroy are created.

comments_controller.rb

class CommentsController < ApplicationController

  def create
    @post = Post.find(params[:post_id])
    @comment = @post.comments.new(comment_params)
    @comment.user_id = current_user.id
    @comments = @post.comments.all
    @comment.save
    render :create
  end

  def destroy
    @comment = Comment.find_by(id: params[:id], post_id: params[:post_id]).destroy
    @comment.destroy
    render :destroy
  end

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

Change the description part of the transition with redirect_to etc. In the above case ** For create action, create.js.erb During the destroy action, destroy.js.erb ** It is supposed to fly to.

js.erb is a file that will be created later.

posts_controller.rb

class PostsController < ApplicationController
  def show
    @post = Post.find(params[:id])
    @comment = Comment.new
    @comments = @post.comments.all
  end
end

This time we will be able to post comments on posts / show

ruby:posts/show.html.slim

#Comment list display
.row
  .col-lg-4
    .col-lg-4

      # create.js.Description is required to rewrite with erb
      div id="comment-text"

        #Partial skip the comment list
        = render 'comments/comment', comments: @comments

    
#Comment form
  .row
    .col-lg-3
    .col-lg-6.text-center
      .frame-post-show

        #local to call js file:Remove the description of true
        = form_with(model: [@post, @comment]) do |f|

          = f.label :comment, class: "font-weight-bold col-lg-3 text-center"
          <br>
          = f.text_area :comment, :size=>"57x5"
          <br>

          .text-center= f.submit "To comment", class: "btn btn-outline-secondary btn-sm"

Manually create the _comment.html.slim file under the comments directory Paste the comment list part that was skipped in the partial.

ruby:comments/_comment.html.slim

- @comments.each do |comment|

  # destroy.js.Description is required to rewrite with erb
  div id="comment-#{comment.id}"
    .frame-post-comment
      = attachment_image_tag comment.user, :image, fallback: 'noimage.png', size: "50x40", class: "mb-3"
      = link_to comment.user.name, user_path(comment.user)
      - if comment.user == current_user
      
        #remote to call js file:Add true
        = link_to 'Delete', post_comment_path(comment.post, comment), method: :delete, remote: true, data: { confirm: "Deleteしてよろしいですか？" }, class: "btn btn-outline-danger btn-sm m-0 ml-3"
      <br>
      small.m-0= comment.created_at.to_s(:datetime_jp)
      .mt-4.mb-2= comment.comment

Manually create the create.js.erb file under the comments directory

ruby:comments/create.js.erb

#　id="comment-text"Part_comment.html.Rewrite slim content without page transition
$('#comment-text').html("<%= j(render 'comments/comment',{ comments: @comments }) %>");

# f.text_Empty the area (if you don't write it, the comment will remain on the form after posting)
$('textarea').val('');

Manually create the destroy.js.erb file under the comments directory

ruby:comments/destroy.js.erb

# "comment-#{comment.id}"Hide posts with
$('#comment-<%= @comment.id %>').remove();

**Complete! ** **