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

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

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

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

非同期処理

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

Q&A

解決済

1回答

1084閲覧

railsでjQueryによって非同期通信を行いたい

moon_light

総合スコア23

Ruby on Rails

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

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

非同期処理

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

0グッド

0クリップ

投稿2020/07/08 13:43

前提・実現したいこと

railsにてjQueryを使って、対象をhoverした時に書き換えを行うために、index.js.erbにレンダリングしたいです。

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

Started GET "/?question%5Bid%5D=100&question%5Btitle%5D=%E6%AD%AF%E3%82%92%E7%A3%A8%E3%81%8F%E9%AD%94%E8%A1%93%E7%B5%82%E7%82%B9%E3%81%A1%E3%81%88%E3%82%93%E5%BC%B1%E8%99%AB%E3%81%AA%E3%82%93%E3%81%B9%E3%81%84%E3%81%AA%E3%81%84%E3%81%97%E3%82%87%E3%81%B0%E3%81%AA%E3%81%97%E3%81%9F%E3%81%A4%E3%81%92%E3%82%93%E3%82%81%E3%81%A4%E3%81%82%E3%82%89%E3%81%99%E3%80%82&question%5Bcontent%5D=%E6%9D%8F%E3%81%8A%E3%82%8A%E3%82%81%E5%BD%93%E3%81%A6%E5%AD%97%E3%81%84%E3%81%86%E3%81%AF%E3%82%8A%E3%81%84%E3%81%AD%E3%81%B0%E3%82%8A%E6%AD%AF%E3%82%92%E7%A3%A8%E3%81%8F%E8%89%B2%E3%80%85%E5%90%8C%E5%83%9A%E3%81%8D%E3%82%87%E3%81%86%E3%81%8D%E3%81%93%E3%81%AF%E3%82%93%E3%80%9C%E7%B3%BB%E5%BE%B3%E5%B7%9D%E6%95%91%E6%80%A5%E8%BB%8A%E6%82%B2%E3%81%97%E3%81%BF%E3%81%8B%E3%81%84%E3%81%9E%E3%81%8F%E5%9C%B0%E9%9D%A2%E5%A1%BE%E7%94%9F%E3%81%B8%E3%81%84%E3%81%8C%E3%81%84%E3%82%82%E3%81%86%E3%81%99%E3%81%96%E3%82%93%E3%81%B4%E3%82%93%E9%A6%AC%E3%82%81%E3%81%84%E3%81%8C%E3%82%89%E3%81%97%E3%82%87%E3%81%86%E3%82%8A%E3%82%83%E3%81%8F%E3%81%9D%E3%81%82%E3%81%8F%E3%81%9F%E3%81%84%E3%81%93%E3%81%86%E3%81%99%E3%82%8B%E3%81%AF%E3%81%AA%E3%81%A2%E3%81%82%E3%82%89%E3%81%99%E3%82%88%E3%81%86%E3%81%84%E6%86%82%E3%81%84%E3%80%82&question%5Bcreated_at%5D=2020-06-23T22%3A26%3A37.514%2B09%3A00&question%5Bupdated_at%5D=2020-06-23T22%3A26%3A37.514%2B09%3A00&question%5Buser_id%5D=19&question%5Bimpressions_count%5D=0&remote=true&_=1594214689481" for 106.73.176.128 at 2020-07-08 22:24:52 +0900 Cannot render console from 106.73.176.128! Allowed networks: 127.0.0.1, ::1, 127.0.0.0/127.255.255.255 Processing by QuestionsController#index as */* #本当はここにRendering questions/index.js.erbが入るはず Parameters: {"question"=>{"id"=>"100", "title"=>"歯を磨く魔術終点ちえん弱虫なんべいないしょばなしたつげんめつあらす。", "content"=>"杏おりめ当て字いうはりいねばり歯を磨く色々同僚きょうきこはん〜系徳川救急車悲しみかいぞく地面塾生へいがいもうすざんぴん馬めいがらしょうりゃくそあくたいこうするはなぢあらすようい憂い。", "created_at"=>"2020-06-23T22:26:37.514+09:00", "updated_at"=>"2020-06-23T22:26:37.514+09:00", "user_id"=>"19", "impressions_count"=>"0"}, "remote"=>"true", "_"=>"1594214689481"} Rendering questions/index.html.erb within layouts/application

該当のソースコード

questions_controller.rb def index #Question.allの代わりにQuestion.page(params[:page]).per()が入る @q = Question.ransack(params[:q]) @questions = @q.result(distinct: true).sort_question(params[:target]).page(params[:page]).per(PER) #jsファイルにQuestion.allを渡す gon.questions = Question.all respond_to do |format| format.html format.js{} end end

sample.js (該当部分)

js

1 $(".question-title-abr").hover(function(){ 2 let q_id = $(this).attr('data_qid') 3 let question = gon.questions[q_id - 1] 4 5 $.ajax({ 6 type: "GET", 7 url: "/", 8 cache: false, 9 data: { question: question, remote: true }//必要なステータスを送るremote:trueを忘れずに 10 }); 11 12 },function(){ 13 // ホバーアウト時の処理 14 }); 15

index.html.erb

html

1 <% @questions.order(created_at: "DESC").each do |question| %> 2 <article class="col-md-6"> 3 <dl> 4 <hr> 5 <dt class="question-title-abr" id="question-title-abr-<%= question.id %>" data_qid="<%= question.id %>"><%= link_to question.title.truncate(20) ,question_path(question) %></dt> 6 <dd>投稿日時: <%= simple_time(question.created_at) %></dd> 7 <% if user_signed_in? && current_user.id == question.user_id %> 8 <dd>[ <%= link_to '編集', edit_user_question_path(current_user, question) %> ] [ <%= link_to '消去', user_question_path(current_user, question), method: :delete, data: {confirm: 'Are you sure?'} %> ]</dd> 9 <% end %> 10 <hr> 11 </dl> 12 </article> 13 <% end %>

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

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

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

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

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

guest

回答1

0

自己解決

自己解決しました。。

投稿2020/07/13 14:15

moon_light

総合スコア23

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問