[RUBY] 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! ** **

Recommended Posts

Comment function (Ajax) implementation
Follow function (Ajax) implementation
Implementation of like function (Ajax)
[Ruby on Rails] Comment function implementation
[Rails] Comment function implementation procedure memo
Implemented comment function
Rails [For beginners] Implementation of comment function
Implementation of search function
Image preview function implementation
Rails search function implementation
Implementation of pagination function
Search function [copype implementation]
Rails implementation of ajax removal
Rails fuzzy search function implementation
Use ransack Search function implementation
[Rails 6] Implementation of search function
Implementation of image preview function
[Rails] Implementation of category function
Implementation of category pull-down function
Login function implementation with rails
Ajax bookmark function using Rails
About immediate comment update function
[Rails] Implementation of tutorial function
[Rails] Implementation of like function
App creation comment function asynchronous
[Rails 6] Pagination function implementation (kaminari)
[Rails] Implementation of CSV import function
[Rails] Asynchronous implementation of like function
Real-time comment function with Action Cable (2/2)
[Rails] Implementation of image preview function
About error handling of comment function
[Rails] About implementation of like function
[Rails] Implementation of user withdrawal function
[Rails] Implementation of CSV export function
[Rails] Comment function (registration / display / deletion)
Real-time comment function with Action Cable (1/2)
[Rails] gem ancestry category function implementation
[Rails 6] Like function (synchronous → asynchronous) implementation
Error encountered in tagging function implementation
Implementation of like function in Java
Implementation of user authentication function using devise (2)
[Ruby on Rails] Follow function implementation: Bidirectional
Implementation of user authentication function using devise (1)
Where the follow function implementation is stuck
Rails Basic CRUD function implementation procedure scaffold
Implemented follow function in Rails (Ajax communication)
[Rails 6] Implementation of SNS (Twitter) sharing function
Implementation of user authentication function using devise (3)
[Vue.js] Implementation of menu function Implementation version rails6
[Ruby on rails] Implementation of like function
[Vue.js] Implementation of menu function Vue.js introduction rails6
Login function implementation by Spring Security (securityConfig)
[Rails 6] Asynchronous (Ajax) follow function is implemented