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

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

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

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

Ruby

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

Q&A

0回答

1979閲覧

フォロー、フォロワー一覧の中のフォローボタン機能のajax化について

messy1019

総合スコア18

Ruby on Rails 5

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

Ruby

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

0グッド

0クリップ

投稿2018/10/05 19:48

railsチュートリアルを参考にフォロー機能を実装しました。

その後、twitterのようにフォロー、フォロワー一覧の中にもフォローボタンを追加しました。

フォロー有無に対しての「フォロー中」、「フォローする」という見た目は実装できたのですが、肝心のボタンを押すとデータベースはしっかりとフォロー、アンフォローされているのですが、ajaxにて見た目が変わりません。

以下がそれぞれのファイルのコードです。

●users.controller.rb

def following @title = "フォロー一覧" @user = User.find(params[:id]) @users = @user.following render 'show_follow' end def followers @title = "フォロワー一覧" @user = User.find(params[:id]) @users = @user.followers render 'show_follow' end

フォロー、フォロワー一覧のviewファイル
●show_follow.html.haml

- provide(:title, @title) .jumbotron3.jumbotron-extend .jumbotron-container .row .profile-cover-image - if @user.profile_cover_image? %span.article-thumb-image.crop-image{style: "background-image:url('#{@user.profile_cover_image}')"} - else %span.profile_cover_no_image / = image_tag("/images/icon/no-image.png", class: 'profile_cover_no_image' ) .profile-image - if @user.profile_image? %span.article-thumb-image.crop-image{style: "background-image:url('#{@user.profile_image.url}')"} - else %i.far.fa-smile.profile_no_image %section.stats.grid-cell = render 'shared/stats' - if logged_in? - if current_user == @user = link_to 'プロフィールを編集', edit_user_path, class: 'btn btn-primary', :id => "button6" - else = render 'follow_form' .row.separate %aside %h3.user-nickname= @user.nickname .self-introduction .self-introduction-length - if @user.self_introduction.present? / = simple_format(@user.self_introduction) = raw(@user.self_introduction.gsub(/\n/, '<br>')) - else 自己紹介を書いてみよう %br/ %br/ 右上のプロフィールを編集ボタンをクリック .micropost-list3 - if @users.any? .action-list %h4= @title %ul.users-follow - @users.each do |user| = render user

上記のrender先のファイル
●_user.html.haml

%li - if user.profile_cover_image? %span.article-thumb-image.crop-image{style: "background-image:url('#{user.profile_cover_image}')"} - else %span.profile_cover_no_image - if user.profile_image? %span.article-thumb-image1.crop-image{style: "background-image:url('#{user.profile_image.url}')"} - else %i.far.fa-smile.profile_no_image - if current_user != user = render partial: 'following_follower_form', locals: {user: user } - else .blank-button %h4= link_to user.nickname, user .follow-introduction - if user.self_introduction.present? %h5= raw(user.self_introduction.gsub(/\n/, '<br>'))

上記render先のファイル
●_following_follower_form.html.haml

#follow_form - if logged_in? - if current_user.following?(user) = render partial: 'following_follower_unfollow', locals: {user: user } - else = render partial: 'following_follower_follow', locals: {user: user } - else = render partial: 'following_follower_follow', locals: {user: user }

上記render先のunfollowファイル
●_following_follower_unfollow.html.haml

= form_for(current_user.active_relationships.find_by(followed_id: user.id), | html: { method: :delete }, | remote: true) do |f| | = f.submit "フォロー中", class: "btn btn-primary ", :id => 'button3'

●relationship.controller.rb

def create @user = User.find(params[:followed_id]) current_user.follow(@user) # @relationship = current_user.follow(@user) @user.reload 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) @user.reload respond_to do |format| format.html { redirect_to @user } format.js end end

ajax用jsファイル
●create.js.erb

$("#follow_form").html("<%= escape_javascript(render('users/following_follower_unfollow')) %>"); $("#followers").html('<%= @user.followers.count %>');

今回は、create飲み記載していますが、destroyもほぼ同様の内容です。

わかりづらい内容になってしまい申し訳ございませんが、お分かりになる方がいらっしゃいましたら教えて頂ければ幸いです。

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

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

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

ただいまの回答率
85.49%

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

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

質問する

関連した質問