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もほぼ同様の内容です。
わかりづらい内容になってしまい申し訳ございませんが、お分かりになる方がいらっしゃいましたら教えて頂ければ幸いです。
あなたの回答
tips
プレビュー