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

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

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

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

Ruby on Rails

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

非同期処理

非同期処理とは一部のコードを別々のスレッドで実行させる手法です。アプリケーションのパフォーマンスを向上させる目的でこの手法を用います。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

解決済

3回答

11812閲覧

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

hai-sai.

総合スコア9

Ruby

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

Ruby on Rails

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

非同期処理

非同期処理とは一部のコードを別々のスレッドで実行させる手法です。アプリケーションのパフォーマンスを向上させる目的でこの手法を用います。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

0クリップ

投稿2019/11/26 09:54

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
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

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

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

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

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

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

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

guest

回答3

0

ベストアンサー

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

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

/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

細かく提案いただき、ありがとうございます。 自分のローカル環境で確認したのですが、1〜4までは問題ないようでした。 5のレスポンスは、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 にある2行のうち1行を削除して、どちらかのみ動作するか、両方とも動作しないのか確認してください。 $("#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">の記述が抜けており、コードを追加すると動きました。。色々と教えて頂き本当にありがとうございました。この一件でデバックの勉強もしようというキッカケになりました。ありがとうございました。
guest

0

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

投稿2019/12/03 05:16

togino77

総合スコア143

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

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

hai-sai.

2019/12/03 09:27

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

0

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に書くとフォロワー数が出てきましたが、これで何が分かるのでしょうか?理解不足で申し訳ありません。。
hai-sai.

2019/12/03 09:26

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問