More than 5 years have passed since last update.

RailsでAjaxとjs個別読み込み？を試してみた備忘録

Posted at 2015-11-16

はじめに

初投稿 & だいぶ既出
備忘録だから許してください〜
FXの現在レート取得APIを一定間隔で叩いてグラフ出したいな〜って思って始めてみました
ホントにこれでいいのか謎なのでツッコミお待ちしております

まずこんなコントローラを用意します

xxx_controller.rb

# 大本のページのやつ
def yyy
  @time = Time.now()
end

# ajaxリクエストを受け取って実行するやつ
def ajax_action
  @time = Time.now()
end

setIntervalで５秒毎にAjaxのリクエストをするcoffeescriptを作成

xxx.js.coffee

$ ->
  timer = setInterval ->
    update()
  , 5000

update = ->
  $.ajax
    url: 'xxx/ajax_action'
    type: 'GET'
  return

routesも追加記述(scaffoldで作り始めちゃったのでこんな書き方に)

routes.rb

resources :xxx do
  get "ajax_action", to: "xxx#ajax_action", on: :collection
end

viewをこんな感じにやると完成です
ちなみに最初はerbではなくslimを使ってたのですが、hoge.js.slimがちょっと上手くいかなかったのでerbに戻しました

ajax_action.js.erb

$("#time").html("<%= @time %>");

yyy.html.erb

<p id="time"><%= @time %></p>

これで5秒毎にpタグの部分だけ変わります

なんかこんな感じでいっぱいajax書いてたら、一辺に読み込み＆実行されて嫌だなって思って、個別でなんとか読み込ませて実行します
なるべく元の状態(rails newした状態)から変えずにやりたかったので、こんな感じ↓の方法をとってみました

jquery.readyselectorってのを使います
https://github.com/Verba/jquery-readyselector
からjquery.readyselector.jsを持ってきて、assets/javascript配下に置きます

application.html.erbのbodyの部分をちょっとだけ変更

application.html.erb

<body class="<%= controller_name -%> <%= action_name -%>">

上で書いたcoffeescriptを次のように変更

xxx.js.coffee

$('.xxx.yyy').ready ->
  timer = setInterval ->

このままでいけるんですが、turbolinksのせいでリンクから飛んできたら動いてくれないので

gem 'jquery-turbolinks'

を入れたらいい感じになるらしいです