【rails】フォロー機能。 非同期編

前回まで
技術系ブログ【rails】フォロー機能。 - 技術系ブログ

非同期詳細　 【rails】いいね機能 非同期編 - 技術系ブログ

remote:tureを追加

そしてjqueryで拾えるようにidを追加

#app/views/relationships/_form.html.slim

#follow
  =button_to current_user.active_relationships.build, params: { followed_id: @user.id }, remote: true do
    | フォローする

#app/views/relationships/_unform.html.slim

#unfollow
  =button_to current_user.active_relationships.find_by(followed_id: @user.id), method: :delete, remote: true do
    | 解除する

これでボタンを押すとapp/views/controller名/アクション名.リクエストの形式.js.erbを探すようになるので

.jsファイル作成

touch app/views/relationships/create.js.erb
touch app/views/relationships/destory.js.erb

#app/views/relationships/create.js.erb

$("#follow").html("<%= escape_javascript(render('users/follow_form')) %>");
$("#followers").html("<%= @user.followers.count %>");
#フォローボタンをの切り替えとフォロー人数の変更を非同期でやる

# app/views/relationships/destory.js.erb
$("#unfollow").html("<%= escape_javascript(render('users/follow_form')) %>");
$("#followers").html("<%= @user.followers.count %>");

コントローラー編

jsファイルのフォーマットがならjsファイルを探すようにする。　　

#app/controller/relationships_controller
class RelationshipsController < ApplicationController
  def create
    @user = User.find(params[:followed_id])
    current_user.follow(@user)
    respond_to do |format|
      format.html { redirect_to @user }
      format.js
    end
  end

  def destroy
    @user = Relationship.find(params[:id]).followed
    current_user.unfollow(@user)
    respond_to do |format|
      format.html { redirect_to @user }
      format.js
    end
  end
end

おしまい