Ajaxの非同期通信がリロードをしないと反映されない

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
rails tutorialを参考にしながらインスタグラム風のアプリを作成しています。
フォロー機能の実装中ですが、フォローボタンをAjaxで非同期通信で実装したいのですが、リロードボタンを押さないと反映されません。

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

該当のソースコード

gem file

gem 'rails',                   '5.1.6'
gem 'bcrypt',                  '3.1.12'
gem 'faker',                   '1.7.3'
gem 'carrierwave',             '1.2.2'
gem 'mini_magick',             '4.7.0'
gem 'will_paginate',           '3.1.6'
gem 'bootstrap-will_paginate', '1.0.0'
gem 'bootstrap-sass',          '3.3.7'
gem 'puma',                    '3.9.1'
gem 'sass-rails',              '5.0.6'
gem 'uglifier',                '3.2.0'
gem 'coffee-rails',            '4.2.2'
gem 'jquery-rails',            '4.3.1'
#gem 'turbolinks',              '5.0.1'
#gem 'jquery-turbolinks'
gem 'jbuilder',                '2.7.0'
gem 'rails-i18n'
gem 'ffi',                     '1.11.1'

application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title><%= full_title(yield(:title)) %></title>
    <%= csrf_meta_tags %>
    <%= stylesheet_link_tag    'application', media: 'all',
                               'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application',
                               'data-turbolinks-track': 'reload' %>
   <%= render 'layouts/shim'%>
  </head>
  <body>
   <%= render 'layouts/header' %>
    <% flash.each do |message_type,message| %>
    <div class = "alert alert-<%= message_type %>"><%= message %></div>
  <%end%>
    </header>
    <div class="container">
      <%= yield %>
      <%= render 'layouts/footer'%>
    </div>
  </body>
</html>


application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//

//= require jquery
//= require jquery_ujs
//= require_tree .

create.js.html

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

destroy.js.html

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


relationships.controller.rb

class RelationshipsController < ApplicationController
    before_action :logged_in_user


    #フォローする
    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

試したこと

検索している中で、turbolinksを消してbundleをやれば解消されるという記事をいくつか見て試しましたが、うまくいきません。

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

Rails 5.1.6

ここにより詳細な情報を記載してください。

回答3件

ベストアンサー

下記のように、処理の流れをおって、どこで意図したように動かなくなっているのか突き止める必要があるかと思います。

お使いのブラウザのデベロッパーツールを開き、フォローボタンを押した時に

/relationships/117 への POST アクセスがあるか確認下さい。（117という数字は例）
0. もし、アクセスがなければデベロッパーツールのコンソール(Console)に、エラーが出ているはずなので、それを教えて下さい。
0. アクセスがあれば、それが Status Code 200 で返ってきているか確認下さい。
0. もし、Status Code 500 など 200 以外のエラーが発生している場合は、Rails サーバ側の logs/developer.log にエラーログが出ているはずなので、それを教えて下さい。
0. エラーがなければ、アクセスのレスポンス(Response)に

$("#followers").html('10');
```  のような JavaScript が含まれているのを確認下さい。
0. この JavaScript が実行されていれば、画面が正常に更新されています。もし画面に変化が見られない場合は、コンソール(Console)にエラーが出ているはずので、それを教えてください。

投稿2019/12/06 03:49

togino77

総合スコア143

回答へのコメント

hai-sai.

2019/12/06 10:05

細かく提案いただき、ありがとうございます。自分のローカル環境で確認したのですが、１〜４までは問題ないようでした。５のレスポンスは、relationships.self~をクリックすると下のような表示になりましたがこれのことでしょうか？ (function() { }).call(this); ご確認のほどお願いいたします。

togino77

2019/12/08 12:39

ここでのレスポンスというのは、例えば Chrome を使っていればデベロッパーツールを開いて、Network タブの中で、POST /relationships/114 アクセスをクリックした時の右のペインに表示される　Response(Raw response data) のことです。

hai-sai.

2019/12/09 10:42

やはりrelationshipsのレスポンスには (function() { }).call(this); という記載があります。このコードは関係ないでしょうか。お手隙の際に確認をお願いいたします。

togino77

2019/12/10 13:30

どうも、本質的に話が噛み合っていないようですね。「該当のソースコード」にあるソースは、見たところ問題ないかと思われます。ですので User の View 関係のソース(app/views/users 以下にある .erb）に間違いはないでしょうか。今一度ご確認ください。 Rails チュートリアルの通りですと、app/views/users/_follow.html.erb の form_for ..., remote:true にて POST /relationships/117 に Ajax でアクセスし、そのレスポンスとして create.js.erb で出力された JavaScript が、app/views/users/_follow_form.html.erb で出力されていた HTML を書き換える流れになっているはずです。初学者にはちょっと難解かもしれませんが、チュートリアルをよく読み、その通りにすれば動きます。ちなみに、フォローには POST （アンフォローには DELETE）リクエストを使っているので、この通信の時だけ、自動的に turbolink はオフになる（turbolink は GET リクエストにしか作用しない）ので、turbolink は無関係です。

hai-sai.

2019/12/11 13:29

理解不足で申し訳ございません。確認した所、 <%= form_for(current_user.active_relationships.build, remote: true) do |f| %> <div><%= hidden_field_tag :followed_id, @user.id %></div> <%= f.submit "Follow", class: "btn btn-primary" %> <% end %> のコードを <%= form_for(current_user.active_relationships.build) do |f| %> <div><%= hidden_field_tag :followed_id, @user.id %></div> <%= f.submit "Follow", class: "btn btn-primary" %> <% end %> にするとリロードしないでも反映されるようになりました。ただ、前者のコードはRails tutorialではAjax用のコードになっているのでなぜ反映されるかが分かりません。。モヤモヤな状態ではありますが解決したい問題は解決しました。細かく答えていただきありがとうございます。

togino77

2019/12/13 01:12

remote: true のあるなしに関わらず class RelationshipsController の def create が実行されて、その中の current_user.follow(@user) までは正常に動作しているようです。ですので、症状としては不思議なことは何もありません。問題は remote: true がない場合、format.html{redirect_to @user} が実行され、こちらは正常で、remote: true がある場合、format.js が実行され、こちらは正常に動作していない、ということです。ということは、dossy さんの回答とも同じになるのですが、 1. サーバ側の create.js.erb のレンダリングで正常な JavaScript が生成されていない。 2. ブラウザ側で、受け取ったJavaScript が正常に実行されていないのどちらか、あるいは、その両方ということになります。例えば create.js.erb の中身を alert("Hello"); だけにして見て下さい。フォローボタンを押した時に、ブラウザ側で Hello とダイアログが表示されたのであれば、JavaScript は正常に動作していることになるので、その中身が問題であるとわかります。あと、Ajax を使う場合は、ブラウザのデベロッパーツール（開発ツール）を用いて、サーバとの通信内容のトレースや JavaScript のデバッグができるスキルを身に付けられた方がよいかと思います。

togino77

2019/12/13 01:31

あと、ひとつアドバイスですが。通常、システムが異常な（バグがある）場合に、デバッグをします。でも、初心者は、システムが正常な時にこそ、デバッグをしておくべきです。なぜなら、デバッグというのは、直接バグを見つけるのではなく、正常な部分を取り除いたところにバグがあると考えるからです。ですので、普段から正常な状態を把握していないと、闇雲にバグを探すことになり、それは非常に困難です。

hai-sai.

2019/12/13 09:45

ご回答ありがとうございます。create.js.erbにalert("Hello");だけを入れるとダイヤログが表示されました。なのでrails　tutorial通りに内容を修正したのですが、症状は変わりません。またデバックについて大変勉強になります。今までデバックを行わずコードを書いていましたが、これからは少しずつデバックも出来るように勉強していきます。アドバイスまでいただき本当にありがとうございます。

togino77

2019/12/16 07:44

create.js.erb にある２行のうち１行を削除して、どちらかのみ動作するか、両方とも動作しないのか確認してください。 $("#followers").html('<%= @user.followers.count %>'); が動作しないのであれば、app/views/shared/_stats.html.erb で<strong id="followers" class="stat"> と記述があり、正常にHTMLが出力されているか確認してみてください。 $("#follow_form").html("<%= escape_javascript(render('users/unfollow')) %>"); が動作しないのであれば、app/views/users/_follow_form.html.erb で <div id="follow_form"> と記述があり、正常にこのタグが出力されているか確認してみて下さい。また app/views/users/_unfollow.html.erb に記述ミスはありませんか？いずれにせよ、「内容を修正したのですが、症状は変わりません」で、本当に症状が変わっていないのであれば、ブラウザのコンソールログにエラーか、サーバのログにエラーが出ているはずなので、それを教えて下さい。

hai-sai.

2019/12/17 11:09

返信遅れまして申し訳ございません。確認した所、_follow_form.html.erbの<div id="follow_form">の記述が抜けており、コードを追加すると動きました。。色々と教えて頂き本当にありがとうございました。この一件でデバックの勉強もしようというキッカケになりました。ありがとうございました。

ファイル名を create.js.html ではなく create.js.erb にしないと動かないと思いますがどうでしょうか。 (destroy も）

投稿2019/12/03 05:16

togino77

総合スコア143

回答へのコメント

hai-sai.

2019/12/03 09:27

コメントありがとうございます。申し訳ございません、確認した所ファイルはerbファイルになっていました。。記載ミスです

controllerなどで状態は保存ができているという理解でいいのでしょうか？

この情報だと、controllerで非同期できているけども、
htmlの処理が行われていないのではないかと思います。

ajaxで帰って来た値はjs.htmlで取得できていますか？
consoleとか使ってみてみてもいいかも。

投稿2019/11/30 08:28

dossy

総合スコア109

回答へのコメント

hai-sai.

2019/12/02 09:31

返信が遅くなり申し訳ございません。はい、データベースにフォローの情報は保存されます。 ajaxで帰って来た値はjs.htmlで取得できていますか？といいますと、それはconsoleで確認できるのでしょうか？

dossy

2019/12/02 10:23 編集

普通js fileに処理を書いていれば console.logで出せるのでしょうけども、今回はjs.htmlなので読み込めるかは不明です。（使ったことない）一度やってみてできなければ、html上に<%= @user.followers.count %>を書いて数字が出てくるか確認をしてもいいかもしれません。 <div id="result"></div> ##htmlにかく $("#result").append(<%= @user.followers.count %>) ## js.htmlにかく

hai-sai.

2019/12/02 10:53

console.logでjsファイルの読み込み方を調べてみましたが方法が分かりません。。 <%= @user.followers.count %>をhtmlに書くとフォロワー数が出てきましたが、これで何が分かるのでしょうか？理解不足で申し訳ありません。。

dossy

2019/12/03 03:15

http://mochikichi.hatenablog.com/entry/rails_tutorial_like#STEP7-JS%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E4%BD%9C%E3%82%8B http://mochikichi.hatenablog.com/entry/rails_tutorial_like#STEP7-JS%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E3%82%92%E4%BD%9C%E3%82%8B このあたりとか参考になるんのではなかろうかと

hai-sai.

2019/12/03 09:26

調べていただきありがとうございます。参考にしてコードを見直してみます。ありがとうございます。

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