質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Q&A

0回答

299閲覧

Rails: 非同期通信を用いてフォローボタンの実装を行いたい

rikuou

総合スコア25

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

0グッド

0クリップ

投稿2020/11/10 04:52

編集2022/01/12 10:55

Railsで非同期通信を用いてフォローボタンの実装を行いたいです

下記サイトを参考にして、自分なりにコードをかいてみたのですがうまくいきません
フォローボタンを押しても、フォロー済みと非同期で変更されません
https://qiita.com/matsubishi5/items/3a70689b42dd98b4d99b

どこか間違っている点はございますでしょうか

どなたかご教授お願いいたします

routes.rb Rails.application.routes.draw do devise_for :admin_users, ActiveAdmin::Devise.config ActiveAdmin.routes(self) devise_for :users root to: "home#index" get 'myself', to: 'home#myself' get 'search', to: 'classrooms#search' resources :classrooms, only: [:index, :show, :create] do resource :reviews, only: [:create] get :rate, on: :member end resources :users, only: [:index, :show] do resource :relationships, only: [:create, :destroy] get :follows, on: :member get :followers, on: :member end resources :clubs # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html end
user.rb class User < ApplicationRecord # Include default devise modules. Others available are: # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable mount_uploader :image, ImageUploader devise :database_authenticatable, :registerable, :recoverable, :rememberable, :validatable has_many :active_relationships, class_name: 'Relationship', foreign_key: :following_id has_many :followings, through: :active_relationships, source: :follower has_many :passive_relationships, class_name: 'Relationship', foreign_key: :follower_id has_many :followers, through: :passive_relationships, source: :following def followed_by?(user) passive_relationships.find_by(following_id: user.id).present? end end
users_controller.rb class UsersController < ApplicationController def index @users = User.all end def show @user =User.find(params[:id]) end #自分がフォローしているユーザ一覧 def follows @user = User.find(params[:id]) @users = @user.followings end #自分をフォローしているユーザ一覧 def followers @user = User.find(params[:id]) @users = @user.followers end end
Relationships_controller.rb class RelationshipsController < ApplicationController #フォローする def create follow = current_user.active_relationships.new(follower_id: params[:user_id]) follow.save user = User.find(params[:user_id]) redirect_to user_path(user.id) end #アンフォローする def destroy follower = current_user.active_relationships.find_by(follower_id: params[:user_id]) follower.destroy user = User.find(params[:user_id]) redirect_to user_path(user.id) end end
users/show.html.erb <div class="container-fluid"> <div class="row my-5"> <div class="col-1 offset-2"> <!-- ユーザ画像 --> <% if @user.image.blank? %> <%= image_tag 'default.jpg', class: "icon-image" %> <% else %> <img src=<%= @user.image %> class="icon_image" > <% end %> </div> <!-- ユーザ詳細 --> <div class="col-7 mt-1 pl-5"> <span class="user-name"><%= @user.username %></span> <% if @user.id != current_user.id %> <span id='follow-button_#{ @user.id }'> <!-- フォローボタン --> <%= render partial: 'users/follow_button' %> </span> <% end %> <p class="user-profile mt-2"><%= @user.profile %></p> <p> <%= link_to "#{@user.active_relationships.count}フォロー", follows_user_path(@user.id) %> <%= link_to "#{@user.passive_relationships.count}フォロワー", followers_user_path(@user.id) %> </p> </div> </div> </div>
_follow_button.html.erb <% if @user.followed_by?(current_user) %> <%= link_to "フォロー済み", user_relationships_path(@user.id), method: :delete, class: "unfollow-link px-3 py-1", remote: true %> <% else %> <%= link_to "フォローする", user_relationships_path(@user.id), method: :post, class: "follow-link px-3 py-1", remote: true %> <% end %>
follow.js.erb $("#follow-button_<%= @user.id %>").html("<%= j(render 'users/follow-button', user: @user) %>");
unfollow.js.erb $("#follow-button_<%= @user.id %>").html("<%= j(render 'users/follow-button', user: @user) %>");

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問