[Rails 6] Asynchronous (Ajax) follow function is implemented


--Created functions related to users with devise --Environment where jquery can be used has been built


The Rails Tutorial has a detailed description of how the follow function works, so we recommend that you refer to it. The column names and model names used this time are as follows. It's just a memo, but I'll put it for reference.

Untitled (13)-7.jpg

Create a Relationship model

Create a relationship model in the console

rails g model relationships

--Reference --Follower: Refer to the user table --Follow: Refer to the user table with the name follow


class CreateRelationships < ActiveRecord::Migration[6.0]
  def change
    create_table :relationships do |t|
      t.references :user, foreign_key: true
      t.references :follow, foreign_key: { to_table: :users }


      t.index [:user_id, :follow_id], unique: true

Perform migration

rails db:migrate

The relationship between the relationship model and the user model is described as follows. Also describe validation.


class Relationship < ApplicationRecord
  belongs_to :user
  belongs_to :follow, class_name: 'User'

  validates :user_id, presence: true
  validates :follow_id, presence: true

――For the association, please refer to the above image. --The "Follow", "Unfollow", and "Check if you are following" methods are used many times, so define them.


class User < ApplicationRecord
  has_many :relationships, dependent: :destroy
  has_many :followings, through: :relationships, source: :follow
  has_many :reverse_of_relationships, class_name: 'Relationship', foreign_key: 'follow_id', dependent: :destroy
  has_many :followers, through: :reverse_of_relationships, source: :user

  def follow(other_user_id)
    relationships.find_or_create_by(follow_id: other_user_id) unless id == other_user_id.to_i

  def unfollow(other_user_id)
    relationship = relationships.find_by(follow_id: other_user_id)
    relationship.destroy if relationship

  def following?(other_user)

Creating a view controller

--In the case of your own user page, the "Edit button" will be displayed, and in the case of other user pages, the "Follow button" will be displayed.


  <% if @user.id == current_user.id %>
    <%= link_to 'Edit', edit_user_registration_path(current_user) %>
  <% else %>
    <%= render partial: 'follow' %>
    <%= render partial: 'follow_count'%>
  <% end %>


<span id="follow">
  <%= follow_button(@user) %>

--Defines follow_button. --If you are using Bootstrap, you can change the color of the button because the key will be primary or secondary depending on whether you are following or not. (If you don't use Bootstrap, you can delete it.) --Ajax communication can be performed by entering remote: true.


module ApplicationHelper
  def follow_button(user)
    label, key = current_user.following?(user) ? %w[Following secondary] : %w[Follow primary]
    link_to(label, user_follow_path(@user), method: :post, remote: true, class: "btn btn-#{key} rounded-pill")

--Written in javascript. --The id in html can render the contents of follow.


$('#follow').html('<%= j(render partial: "follow") %>');

――Don't forget to change the route. --post Must be specified for communication.


Rails.application.routes.draw do
  resources :users, only: %w[index show] do
    post :follow


With @ user.followers.count and @ user.followings.count, it is possible to count and display the number of followers and followers. If you can understand this article, you can easily implement it with Ajax, so please try it.

Recommended Posts

[Rails 6] Asynchronous (Ajax) follow function is implemented
Implemented follow function in Rails (Ajax communication)
[Rails] (Supplement) Implemented follow function
Follow function (Ajax) implementation
[Rails] Implemented hashtag function
[Rails, JavaScript] Implemented like function (synchronous / asynchronous communication)
[Ruby on Rails] Asynchronous communication of posting function, ajax
Implement follow function in Rails
Implement user follow function in Rails (I use Ajax) ②
Implement user follow function in Rails (I use Ajax) ①
Ajax bookmark function using Rails
[Rails] Asynchronous implementation of like function
Implemented mail sending function with rails
[Rails 6] Like function (synchronous → asynchronous) implementation
[Ruby on Rails] Follow function implementation: Bidirectional
Where the follow function implementation is stuck
[Rails 6] Ranking function
[Rails] Category function
How to make a follow function in Rails
Implemented comment function
[Rails] Notification function
Rails application guest login function implemented (devise not used)
Comment function (Ajax) implementation
[Rails] Implement search function
Rails is Owakon www
[rails] tag ranking function
Rails search function implementation
[Rails] I implemented the validation error message by asynchronous communication!
[Rails] Implemented a pull-down search function for Active Hash data