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

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

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

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

Q&A

3回答

1461閲覧

Rails : 非同期でフォローボタンを実装したい

rikuou

総合スコア25

Ruby on Rails

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

0グッド

0クリップ

投稿2020/11/13 12:51

ruby ons railsでwebアプリを作成しています
フォローボタンをajaxを用いて、非同期に処理をしたいのですがうまくいきません
自分で必死に考えて、調べてみたのですが、どこが間違っているかがわかりませんでした。
どなたかコード上で間違っている点がありましたら、ご教授お願いいたします

gemでjquery-rails はインストール済みです
devise導入済み

困っていること

フォロー済みボタンを押しても、フォローするといったボタンに非同期で変化しません
ブラウザを再読み込みすると反映されます

コード

javascripts/application.js //= require rails-ujs //= require activestorage //= require turbolinks //= require jquery3 //= require popper //= require bootstrap-sprockets //= require_tree .
routes.rb Rails.application.routes.draw do devise_for :admin_users, ActiveAdmin::Devise.config ActiveAdmin.routes(self) devise_for :users get 'home/index' get 'home/myself' root to: "home#index" 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
relationship.rb class Relationship < ApplicationRecord belongs_to :following, class_name: 'User' belongs_to :follower, class_name: 'User' validates :following_id, presence: true validates :follower_id, presence: true 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 devise :database_authenticatable, :registerable, :recoverable, :rememberable, :validatable #自分がフォローしているユーザとの関連 has_many :active_relationships, class_name: 'Relationship', foreign_key: :following_id, dependent: :destroy has_many :followings, through: :active_relationships, source: :follower #自分がフォローされているユーザとの関連 has_many :passive_relationships, class_name: 'Relationship', foreign_key: :follower_id, dependent: :destroy has_many :followers, through: :passive_relationships, source: :following def followed_by?(user) passive_relationships.find_by(following_id: user.id).present? 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]) end #アンフォローする def destroy follower = current_user.active_relationships.find_by(follower_id: params[:user_id]) follower.destroy @user = User.find(params[:user_id]) end end
views/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 'users/follow_button', user: @user %> </span> <% end %> <p class="user-profile mt-2"><%= @user.profile %></p> <td id ="following-count_#{ @user.id }"> <%= link_to "#{@user.active_relationships.count}フォロー", follows_user_path(@user.id) %> </td> <td id="follower-count_#{ user.id }"> <%= link_to "#{@user.passive_relationships.count}フォロワー", followers_user_path(@user.id) %> </td> </div> </div> </div>
views/users/_follow_button.html.erb <% if user.followed_by?(current_user) %> <%= link_to 'フォロー済み', user_relationships_path(user.id), method: :delete, class: "unfollow-link d-block px-3 py-1 float-right", remote: true %> <% else %> <%= link_to 'フォロー', user_relationships_path(user.id), method: :post, class: "follow-link d-block px-3 py-1 float-right", remote: true %> <% end %>
views/relationships/create.js.erb $("#follow-button_<%= @user.id %>").html("<%= j(render 'users/follow-button', user: @user) %>"); $("#follower-count_<%= @user.id %>").html(' <%= link_to "#{@user.passive_relationships.count}フォロワー", followers_user_path(@user.id) %>'); $("#following-count_<%= current_user.id %>").html('<%= link_to "#{@user.active_relationships.count}フォロー", follows_user_path(@user.id) %>');
views/relationships/destroy.js.erb $("#follow-button_<%= @user.id %>").html("<%= j(render 'users/follow-button', user: @user) %>"); $("#follower-count_<%= @user.id %>").html(' <%= link_to "#{@user.passive_relationships.count}フォロワー", followers_user_path(@user.id) %>'); $("#following-count_<%= current_user.id %>").html('<%= link_to "#{@user.active_relationships.count}フォロー", follows_user_path(@user.id) %>');

本当にわからないです。。。どなたか。。。

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

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

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

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

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

guest

回答3

0

自分はこんな感じで書いたのでさっきの回答で無理だったら.user_<%= @user.id %>とuser_<%= @user.id %>の表記パクってみてください。

(".user_<%= @user.id %>").html("<%= j(render 'users/follow', user: @user) %>")
<div class="user_<%= @user.id %>"> <%= render 'users/follow', user: @user %> </div>

投稿2020/11/14 05:06

test_user_222

総合スコア20

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

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

0

td classにidを付与すると自分も非同期できなかったので下記をためしてみてください。
<span>のところも<span id="follow-button_#{ @user.id }">のid消してみて無理だったら<p>に変えてみてやってください。

ruby

1<td> 2<p class="following-count_#{ @user.id }" 3<%= link_to "#{@user.active_relationships.count}フォロー", follows_user_path(@user.id) %> 4</p> 5</td>

投稿2020/11/14 04:59

編集2020/11/14 05:00
test_user_222

総合スコア20

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

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

0

#フォローする def create follow = current_user.active_relationships.new(follower_id: params[:user_id]) follow.save @user = User.find(params[: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]) end

これらの @user = User.find(params[:user_id]) の下に、

respond_to do |format| format.html { redirect_to @user } format.js end

を追記してみてください

投稿2020/11/13 14:06

hukurouo

総合スコア108

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

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

rikuou

2020/11/13 14:09

ご回答ありがとうございます 追記してみましたが、状況は変化しませんでした
hukurouo

2020/11/13 14:32 編集

む。 フォローカウントなどは非同期で変更されます?
hukurouo

2020/11/13 14:23

$("#follow-button_<%= @user.id %>").html("<%= escape_javascript(render 'users/follow-button', user: @user) %>"); $("#follow-button_<%= @user.id %>").html("<%= escape_javascript(render 'users/follow-button', user: @user) %>"); これでどうでしょ
rikuou

2020/11/14 01:03

フォローカウントも非同期で変更されません コードを変更してみましたが、やはりページをリロードしないと変化はありませんでした。。。
rikuou

2020/11/14 01:14

いくつか調べてみて, リンクに data: {"turbolinks" => false} を追記すると改善すると行った記事があったので、試してみましたがうまくいきませんでした
hukurouo

2020/11/14 02:00

原因を切り分けていきましょうか。 ・クロームを使っていたら、デベロッパーツールのコンソールログも確認して、何かエラーが出ていないか確認してみてください。 ・特にエラーが出ていなかったら、そもそも create.js.erb が起動しているかを確かめるために、中身を alert("Hello"); のみにしてみましょう。
rikuou

2020/11/14 02:38

Uncaught type error メッセージが複数でてきました event-handler.self-a…1c896c.js?body=1:24 Uncaught TypeError: Cannot read property 'hasAttribute' of null at getjQuery (event-handler.self-a…1c896c.js?body=1:24) at event-handler.self-a…1c896c.js?body=1:43 at event-handler.self-a…1c896c.js?body=1:10 at event-handler.self-a…1c896c.js?body=1:11 . . 末尾行に以下のエラーメッセージも検出されました rails-ujs.self-81c572f39b69ead02e3f97fe43b76954a434591bc2837e3a35af212315e67569.js?body=1:217 DELETE http://localhost:3000/users/2/relationships 500 (Internal Server Error)
hukurouo

2020/11/14 02:50

htmlのDOM要素と上手く疎通できてないっぽいですね パッと見あやしいのはここらですかね $("#following-count_<%= current_user.id %>").html('<%= link_to "#{@user.active_relationships.count}フォロー", follows_user_path(@user.id) %>'); current_user.id のところは @user.id ? <td id="follower-count_#{ user.id }"> user.id は @user.id ?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

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

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問