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

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

ただいまの
回答率

89.22%

railsのフォロー機能の非同期通信でデータ上では動いているが、見た目に変化がない

解決済

回答 3

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 413

ryousukesatou

score 18

前提・実現したいこと

railsでフォロー機能を非同期で実装しようとしているのですが、データはしっかり動いて、フォロー、アンフォローはできているのですが、見た目に変化がないんです。
エラーぽいのがターミナルででているのですが、わかりません。2つ合ったのでどちらも載せときます。
フォロー機能は実装できているので、ajax部分のコードを書いています。

発生している問題・エラーメッセージ

1  Cannot render console from 10.0.2.2! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255
Processing by EndUser::RelationsController#destroy as JS
  Parameters: {"utf8"=>"✓", "authenticity_token"=>"8Sc0zGvEqmHmzkUFQ5q2hFTuiQ1iPwfJrHa7w1qKaA+uS1KWULkOvJowqXNk/c2JGAqDe6Qigevi/ZGhSOGgbA==", "user_id"=>"3", "commit"=>"Unfollow"}




2  ActionView::Template::Error (Missing partial users/_follow with {:locale=>[:en], :formats=>[:js, :html], :variants=>[], :handlers=>[:raw, :erb, :html, :builder, :ruby, :coffee, :jbuilder]}. Searched in:
  * "/vagrant/Make_Memories/app/views"
  * "/var/lib/gems/2.5.0/gems/devise-4.7.1/app/views"
  * "/var/lib/gems/2.5.0/gems/kaminari-core-1.1.1/app/views"
):
    1: $("#follow_form").html("<%= escape_javascript(render("users/follow")) %>");

該当のソースコード

relationscontrolloer

class EndUser::RelationsController < ApplicationController
  before_action :set_user

  def create
    following = current_user.follow(@user)
    respond_to do |format|
      format.html { redirect_to @user }
      format.js
    end
  end

  def destroy
    following = current_user.unfollow(@user)
    respond_to do |format|
      format.html { redirect_to @user }
      format.js
    end
  end

  private
    def set_user
      @user = User.find(params[:user_id])
    end
end
app/views/end_user/users/_follow.html.erb
<%= form_with url: end_user_relation_path, remote: true do |f| %>
  <%= f.hidden_field :user_id, value: @user.id %>
  <%= f.submit 'Follow', class: 'btn btn-primary' %>
<% end %>
app/views/end_user/users/_unfollow.html.erb
<%= form_with url: end_user_relation_path, method: :delete, remote: true do |f| %>
  <%= f.hidden_field :user_id, value: @user.id %>
  <%= f.submit 'Unfollow', class: 'btn btn-danger' %>
<% end %>
app/views/end_user/users/_showtemplate.html.erb
<% if @user.id != current_user.id %>
  <div class="follow-button">
    <%= render 'follow_button' %>
  </div>
<% end %>
app/views/end_user/users/_follow_button.html.erb

<% unless current_user == @user %>
  <div id="follow_form">
    <% if current_user.following?(@user) %>
      <%= render 'unfollow'%>
    <% else %>
      <%= render 'follow' %>
    <% end %>
  </div>
<% end %>
app/views/end_user/relations/create.js.erb

$("#follow_form").html("<%= escape_javascript(render("users/unfollow")) %>");
app/views/end_user/relations/destroy.js.erb

$("#follow_form").html("<%= escape_javascript(render("users/follow")) %>");

試したこと

補足情報(FW/ツールのバージョンなど)

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

check解決した方法

0

無事解決できました。
僕はもともとusers/follow_buttonでusers/followとusers/unfollowをレンダリングしていたのですが、それをやめてusers/follow_buttonのファイルにまとめました。
多分流れとしてはフォローするとcreateアクションが実行されて、フォーマットで同じアクション名のjsファイルを実行しているのだと思います。このファイルでusers/follow_buttonをレンダリングしろということだと思います。
しかし、アクションを実行しないとデータベースにも見た目にも反映されないはずですが、これはjson形式でデータを送受信しているのか、それともjavascript形式で送受信しているのかがわかんないです。そして、なんでjsファイルでusers/followとusers/unfollowをレンダリングするという記述をすると見た目に変化がないのかが全くわかりません。
コメントください。変更したファイルだけ下にまとめます。

app/views/end_user/users/_follow_button.html.erb

<% unless current_user == @user %>
  <div id="follow_form">
    <% if current_user.following?(@user) %>
      <%= form_with url: end_user_relation_path, method: :delete, remote: true do |f| %>
        <%= f.hidden_field :user_id, value: @user.id %>
        <%= f.submit 'Unfollow', class: 'btn btn-danger' %>
      <% end %>
    <% else %>
      <%= form_with url: end_user_relation_path, remote: true do |f| %>
        <%= f.hidden_field :user_id, value: @user.id %>
        <%= f.submit 'Follow', class: 'btn btn-primary' %>
      <% end %>
    <% end %>
  </div>
<% end %>
app/views/end_user/relations/create.js.erb

$("#follow_form").html("<%= escape_javascript(render("end_user/users/follow_button")) %>");
app/views/end_user/relations/destroy.js.erb

$("#follow_form").html("<%= escape_javascript(render("end_user/users/follow_button")) %>");

これ以外のファイルは変更していません。答えてくれた皆様、ありがとうございました!

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/01/12 17:10

    remot:trueで非同期通信(AJAX)をしているところを把握すると良いかもしれません。

    ここがまとまっていてわかりやすいと思います。
    https://qiita.com/__tambo__/items/45211df065e0c037d032

    キャンセル

  • 2020/01/12 22:31

    一個めの疑問は解消しました。ただ2個めがわかりません。他のサイトではusers/_followとusers/_unfollowに分けていて、実際はこの2つのファイルをusers/_follow_buttonにまとめてうまくいったのですが、なんで他のサイトに書いていた分けたやり方だとうまくいかないのでしょうか?

    キャンセル

0

1の方はエラーではありません。

2ですが users/_follow.html.* がないというエラーです。
提示されているviewがみな ruby になっていてどのfileかわからないです。。。

で、
もしかしたら
app/views/end_user/users/_follow_button.html.erb
がそのつもりですか?
これは users/_button.html.* ではないですね。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/01/11 14:19

    回答ありがとうございます。ファイルの記述は使った言語の真下に書きたしました。follow_button.htmlでfollow.htmlとunfollowをレンダリングしています。そして、follow_button.htmlをshowtemplate.htmlをレンダリングしています。そのshowtemplateを他のファイルでレンダリングしているようにしてます。

    キャンセル

  • 2020/01/11 17:44

    そうしますと、destroy.js.erb の render("users/follow") が間違いでrender("users/follow_button") であるべき
    なのか
    /_follow_button.html.erb のfile名がまちがいで/_follow.html.erb
    で有るべきなのか、
    のどちらかでは?

    キャンセル

  • 2020/01/11 21:35

    はい、そんな感じでできました!
    この機能の実装でわかんないのがそこなのですが、他のサイトではjsファイルで
    ("<%= escape_javascript(render("end_user/users/follow")) %>");などと記述していたのですが、なぜそれでは動かず今回のように、
    ("<%= escape_javascript(render("end_user/users/follow_button")) %>");にすると動いたのでしょうか?

    キャンセル

  • 2020/01/11 21:50

    render で呼ぶ名前とviewのfile名を一致させる必要があります。

    キャンセル

0

railsでフォロー機能を非同期で実装しようとしているのですが、データはしっかり動いて、フォロー、アンフォローはできているのですが、見た目に変化がないんです。

フォローしたときに、DBでは反映されているがViewで反映されていない場合、View・JSに問題がありそうです。

フォローボタンを押して、再度ページ読み込みしたら、アンフォローボタンが出てくるのではないでしょうか?
もしそうなら問題は、Rubyで条件分岐しているからだと思います。

app/views/end_user/users/_follow_button.html.erb

<% unless current_user == @user %>
  <div id="follow_form">
    <% if current_user.following?(@user) %>
     <%= render 'unfollow'%>
    <% else %>
     <%= render 'unfollow'%>
    <% end %>
  </div>
<% end %>

見当違いだったらすいません。。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/01/11 15:53

    合っています!ではどうすればいいのでしょうか?rubyで条件分岐をしていますが、rubyの記述を変えるのでしょうか?

    キャンセル

  • 2020/01/11 16:19

    僕は最初ajaxを利用した形を想定していましたが‥ざっと調べた限り、下記が簡単そうでした。
    (いいねボタンですが、コメント欄も含めて確認ください。)
    https://qiita.com/YuitoSato/items/94913d6a349a530b2ea2

    検索キーワードは、「rails フォロー機能 動的(またはjavascriptまたはajax)」とかで探してください。

    そもそものお話ですが、Rubyはサーバーサイドスクリプトと言われ、サーバー側で処理した結果がブラウザに送信・表示されます。
    それに比べてJavaScript(jQuery)などは、ブラウザだけで動的な表現ができます。

    ここで言うJavaScriptの動的な表現とは、フォローボタンを押したら、すぐにアンフォローボタンが表示されるようなことを指します。
    それに比べRubyは、サーバーサイドでしかデータを更新できないため、再度読み込みすると更新されると行った形になります。
    https://www.kagoya.jp/howto/webhomepage/javascript/

    キャンセル

  • 2020/01/11 17:45

    返信ありがとうございます。ちょっとやってみます。

    キャンセル

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

  • ただいまの回答率 89.22%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる