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
あなたの回答
tips
プレビュー