I tried to implement the like function by asynchronous communication

Introduction

Many articles have already been published, but I would like to write it as a memorandum of my own.

Benefits of asynchronous communication

By personally learning "why the technology is used" first, I feel that understanding is quick because the purpose is clear.

1. Only a part of the page can be updated without changing the page.

To be honest, I think it's quite annoying if the page is changed every time you like it. However, by using asynchronous communication, you can comment, like, and edit users without going through __page transitions! __

Implementation!

Step ① Send a JS format request to the server

First, if it is not asynchronous communication, the terminal at the time of like execution behaves as follows. The request format is output in the red circle part of the image. In this case, it means that the communication is in HTML format!

I want to put this in JS format ...!

views:_favorites.html.erb

<%= link_to post_favorites_path(post), method: :DELETE, remote: true do %>

In this way, you can send a JS format request by adding remote: true to the link of the like button.

Step ② Create a partial template for the like button

In order to implement asynchronous communication, the changes need to be partial templates. Specifically, prepare a box of "likes" that you want to partially update, It is an image that switches the display depending on whether you like it or not.

views:views/posts/_favorites.html.erb

  <% if post.favorited_by?(current_user) %>
    <%= link_to post_favorites_path(post), method: :DELETE, remote: true do %>
      <span class="btn btn-danger">Like</span>
    <% end %>
  <% else %>
    <%= link_to post_favorites_path(post), method: :POST, remote: true do %>
      <span class="btn btn-primary">Like</span>
    <% end %>
  <% end %>

Create a partial template views / posts / _favorites.html.erb, Move the like button part here. Then call the partial template created earlier in the original index.html.

views:views/posts/index.html.erb

<div class="main_contents">
    <% @posts.each do |post| %>
        <div class="post_contents">
          <h2><%= link_to post.title, post_path(post.id) %></h2>
          <%= post.content %>

         <!--↓ Add(Where you want to partially update)↓ -->
          <div id="favorite-<%= post.id %>">
             <%= render 'posts/favorites', post: post %>
          </div>
         <!--↑ Up to here ↑-->
        </div>
  <% end %>
</div>

Step ③ Create a js.erb file

For HTML format requests, the view file is views / controller name / action name.html.erb Call the file of.

However, for JS format requests, views / controller name / action name.js.erb Call the file of.

This time, I'm implementing the like function using the create and destroy actions of the favorites controller. views / favorites / create.js.erb and views / favorites / destroy.js.erb Create a file.

ruby:views/favorites/create.js.erb

 #id="favorite-<%= @post.id %>"It is a process to partially update only the HTML of this part with render
$("#favorite-<%= @post.id %>").html("<%= j(render 'posts/favorites',  post: @post ) %>");

ruby:views/favorites/destroy.js.erb

$("#favorite-<%= @post.id %>").html("<%= j(render 'posts/favorites',  post: @post ) %>");

Step ④ Delete the controller redirect

controllers/favorites_controller.rb

    def create
      @post = Post.find(params[:post_id])
      favorite = current_user.favorites.build(post_id: @post.id)
      favorite.save
      redirect_to root_path #← Delete this line
    end

    def destroy
      @post = Post.find(params[:post_id])
      favorite = current_user.favorites.find_by(post_id: @post.id)
      favorite.destroy
      redirect_to root_path #← Delete this line
    end

Complete!

With the above procedure, you can implement desynchronization of the like function!

reference

Ajax (asynchronous communication) is summarized with an emphasis on comprehensibility (with a demo using Rails)