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

Question

前提・実現したいこと

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

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

１  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"}




２　　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/ツールのバージョンなど）

Answer 1

無事解決できました。
僕はもともと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")) %>");

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

Comments

[no1knows]

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

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

[ryousukesatou]

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

Answer 2

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 %>

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

Comments

[ryousukesatou]

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

[no1knows]

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

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

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

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

[ryousukesatou]

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

Answer 3

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

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

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

Comments

[ryousukesatou]

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

[winterboum]

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

[ryousukesatou]

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

[winterboum]

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