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

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

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

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

0回答

1010閲覧

rails 非同期でフォロー機能を実装したいが、非同期ができない

退会済みユーザー

退会済みユーザー

総合スコア0

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2021/01/29 08:28

編集2021/01/29 08:33

Rails初心者でTwitterのようなフォロー機能を非同期で実装をしようとトライしていますが
javascriptの記述がおかしいのか、非同期で更新されません。
現在の状況は、フォローする、フォロー解除を押すとそのままのページから動かず
フォローをカウントする部分を増えたり減ったりしないです。ただ、ページを再読み込みすると
フォロー数に変化があります。

☆データベースにも保存、削除されているのが確認できています。

以下のリンクを参考にしながら作りました。
https://qiita.com/yuto_1014/items/8d508b84fd0c2316ba01

ほぼリンク先と同じになっております。

ブラウザーで気になるエラーが500 Interent serve errorとでて、
http://localhost:3000/relationships/3、
jquery3.self-2a83d06853bd343c7bfc2e5d4539814cfa934676e2948ed348311435eca862f5.js?body=1:10100 と表示されます。

すいません、自分が知識不足もありこれがjavascriptが読み込めてないのか、またはその他のエラーかも
わかっていません。
どなたかご教授お願いいたします。

以下が自身のコードとなっております。

rails

1rails 5.2.4.4 2jquery-rails 4.4.0 3

Gemfile.rb

rails

1gem 'pry-rails' 2gem 'compass-rails', '3.1.0' 3gem 'sprockets', '3.7.2' 4gem 'devise' 5gem 'jquery-rails' and 'turbolinks'

application.js

javascript

1//= require jquery3 2//= require jquery_ujs 3//= require turbolinks 4//= require activestorage 5//= require_tree .

views/layouts/application.html.erb

rails

1 <%= csrf_meta_tags %> 2 <%= csp_meta_tag %> 3 <%= 4 stylesheet_link_tag'application', media: 'all', 'data-turbolinks-track': 5 'reload' %> 6 <%= javascript_include_tag'application', 7 'data-turbolinks-track': 'reload' %> 8</head>

routes.rb

rails

1Rails.application.routes.draw do 2 # For details on the DSL available within this file, see http://guides.rubyonrails.org/routing.html 3 devise_for :users 4 5 root 'home#index' 6 resources :writes do 7 resources :comments, only: [:create] 8 end 9 resources :users do 10 member do 11 get :following, :followers 12 end 13 end 14 15 resources :relationships, only: [:create, :destroy] 16 17 18end 19

user.rb

rails

1class User < ApplicationRecord 2 # Include default devise modules. Others available are: 3 # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable 4 devise :database_authenticatable, :registerable, 5 :recoverable, :rememberable, :validatable 6has_many :writes, dependent: :destroy 7has_many :comments 8has_many :likes 9 10has_many :following_relationships, foreign_key: "follower_id", class_name: "Relationship", dependent: :destroy 11has_many :following, through: :following_relationships 12has_many :follower_relationships, foreign_key: "following_id", class_name: "Relationship", dependent: :destroy 13has_many :followers, through: :follower_relationships 14 15#フォローしているかを確認するメソッド 16def following?(user) 17 following_relationships.find_by(following_id: user.id) 18end 19 20#フォローするときのメソッド 21def follow(user) 22 following_relationships.create!(following_id: user.id) 23end 24 25#フォローを外すときのメソッド 26def unfollow(user) 27 following_relationships.find_by(following_id: user.id).destroy 28end 29end

rails

1class Relationship < ApplicationRecord 2 belongs_to :follower, class_name: "User" 3 #自分がフォローしているユーザー 4 belongs_to :following, class_name: "User" 5 #バリデーション 6 validates :follower_id, presence: true 7 validates :following_id, presence: true 8end 9

users_controller

rails

1class UsersController < ApplicationController 2 3 def index 4 @users = User.all 5 end 6 7 def edit 8 @user = User.find(params[:id]) 9 @writes = @user.writes 10 end 11 12 def update 13 user = User.find(params[:id]) 14 if user.id == current_user.id 15 user.update(user_params) 16 redirect_to action: :show 17 end 18 end 19 20 def show 21 @user = User.find(params[:id]) 22 @writes = @user.writes 23 24 end 25 26 def following 27 #@userがフォローしているユーザー 28 @user = User.find(params[:id]) 29 @users = @user.following 30 render 'show_follow' 31end 32 33def followers 34 #@userをフォローしているユーザー 35 @user = User.find(params[:id]) 36 @users = @user.followers 37 render 'show_follower' 38end 39 40 private 41 def user_params 42 params.permit(:email, :genre, :url_link, :introduce, :word) 43 end 44 45 46end 47

relationship_controller.rb

rails

1class RelationshipsController < ApplicationController 2 3 def create 4 @user = User.find(params[:following_id]) 5 current_user.follow(@user) 6 end 7 8 def destroy 9 @user = User.find(params[:id]) 10 current_user.unfollow(@user) 11 end 12end

ビュー関連

views/users/show.html.erb

rails

1 <div class="follower"> 2 <%= link_to followers_user_path(@user.id) do %> 3 <h5 style="color: black">フォロワー 4 <%= @user.followers.count %>人</h5> 5 <% end %> 6 </div> 7 <div class="follow"> 8 <%= link_to following_user_path(@user.id) do %> 9 <h5 style="color: black">フォロー 10 <%= @user.following.count %>人</h5> 11 <% end %> 12 </div> 13 <div> 14 <%= render "follow_form" %> 15 </div>

views/users/_follow_form.html.erb

rails

1<% if user_signed_in? && @user != current_user %> 2 <div id="follow_form"> 3 <% if current_user.following?(@user) %> 4 <%= render "unfollow" %> 5 <% else %> 6 <%= render "follow" %> 7 <% end %> 8 </div> 9 <% end %>

view/users/_follow.html.erb

rails

1<!-- フォローボタン ------------------------------------------------------------------> 2<%= form_for(current_user, url: relationships_path, method: :post, remote: true) do |f| %> 3 <%= hidden_field_tag :following_id, @user.id %> 4 <%= f.submit "フォローする" %> 5 <% end %>

view/relationships/create.js.erb

javascript

1$("#follow_form").html("<%= j(render("users/users/unfollow")) %>");

users/_unfollow.html.erb

rails

1<!-- フォロー解除ボタン ------------------------------------------------------------------> 2<%= form_for(current_user, url: relationship_path(@user), method: :delete, remote: true) do |f| %> 3 <%= f.submit "フォロー解除" %> 4 <% end %>

relationships/destroy.js.erb

javascript

1$("#follow_form").html("<%= j(render("users/users/follow")) %>"); 2

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問