时间戳

首页 > 解决方案 > “Rails”我想异步实现一个跟随按钮

ruby-on-rails-5 - “Rails”我想异步实现一个跟随按钮

问题描述

我正在使用ruby on rails创建一个Web应用程序我想使用ajax异步处理follow按钮，但是它不起作用我自己拼命思考并试图找出问题所在没有。如果有人在代码中有任何错误，请教我。

jquery-rails 已安装，gem devise 已安装

什么问题

即使我按下followed按钮，它也不会异步更改为follow等按钮它会在您重新加载浏览器时反映出来

代码

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}フォロワー&quot;, 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}フォロワー&quot;, 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}フォロワー&quot;, followers_user_path(@user.id) %>');
$("#following-count_<%= current_user.id %>").html('<%= link_to "#{@user.active_relationships.count}フォロー", follows_user_path(@user.id) %>');

请帮帮我...

标签： ruby-on-rails-5

解决方案

您可能需要respond_to在控制器创建和销毁方法的末尾添加一个块，如下所示：

respond_to do |format|
  format.html
  format.js
end

推荐阅读