RailsのControllerで取得したデータベースをJavaScriptに渡してあげて、ページ遷移せずにページの切り替えをしようとしています。
Ajaxを使って、RailsのControllerを動かし、その際パラメータとして日付データを渡しています。初回のアクセス時は今日の日付で渡すようにControllerで分岐をさせています。
その日付データを使ってSQLを作成し、データベースを取得した後に、ControllerからJavaScriptに結果を渡しています。
そのときに使っているのは、Railsにある「gon」というgemです。gon.dataで受け渡しをしています。
受け取ったJavaScript側はAjaxのControllerでの動作が正常だった場合、ページ内の値をデータベースの結果にしようとしています。
しかし、ページが切り替わりません。
ログを見る限り、下記は成功しているようです。
・Controllerから指定の日付でSQLを投げる所(Railsのログより成功していることの確認
・初回で来た際には今日の日付でSQLを投げて、その結果を表示させる
出来ていないのが下記の通りです。
・初回アクセス後に今日の日付になっている値を変更し、JavaScriptを動かし(onChangeで)その結果を現在のページに反映させる
「gon」の内容がもしかしたら、上手く渡せていないのかなと思い調べている最中です。
ご教授頂ければ幸いです。
【追記1】
現状のコードはこうなっています
Ruby
1<div id="<%= program.id %>_title">タイトル</div>
今はこのコードなのですが、よく考えたら、HTML内をRubyで定義しちゃっているので破棄はしようと思っています。
JavaScriptが下記の通りです。
JavaScript
1 $.ajax({ 2 url: "/top", 3 type: "GET", 4 data: { days: days 5 }, 6 dataType: "html", 7 success: function(data) { 8 for (i in gon.program){ 9 document.getElementById(gon.program[i].id + "_title").innerHTML = gon.program[i].p_title 10 document.getElementById(gon.program[i].id + "_about").innerHTML = gon.program[i].about 11 } 12 }, 13 error: function(data) { 14 15 console.log("errror"); 16 17 } 18 });
Controller側が下記の通りです。
Ruby
1 if params[:days] == nil 2 @d1 = Date.today; p @d1 3 else 4 @d1 = params[:days] 5 end 6 @program = Program.where(day: @d1).order("start_time ASC") 7 gon.program = @program
【追記2】
試しに、下記のコードを作ってみました。
Ruby
1 function test(){ 2 console.log('テスト') 3 } 4 5 function test2(){ 6 gon.watch('program', interval:1000 ,test) 7 }
徐々に理解してきたのですが、test2を動かすとtestが動くと。
ただ、この状態ですと「Uncaught SyntaxError: missing ) after argument list」が発生し、うまく動きません。
intervalを削除して、('program', test)にすると、コンソールログに「テスト」が表示されます。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/07/27 08:37
2018/07/27 12:34
2018/07/30 04:54
2018/07/30 05:56
2018/07/30 06:08
2018/07/30 06:15
2018/07/30 06:19
2018/07/30 06:21
2018/07/30 06:22
2018/07/30 06:24
2018/07/30 06:25
2018/07/30 06:38
2018/07/30 06:40
2018/07/30 06:57
2018/07/30 09:20
2018/07/30 09:25
2018/07/30 09:33
2018/07/30 09:41
2018/07/30 10:28
2018/07/30 10:36
2018/07/30 10:44
2018/07/31 04:50
2018/07/31 06:38
2018/07/31 07:02
2018/07/31 07:27
2018/07/31 10:11