RailsでjQueryが動かないと思ったら

Railsを使ってて忘れがちな点。

Turbolinks

こいつがjQueryの動きを止めます。
といっても、ページ読み込みを劇的に早くしてくれる強い味方なので、是非とも使いたい。

※ Rails4からTurbolinksはデフォルトGemになりました。
※ Rails3でも使えます。もちろんRails4で使わないという選択肢もあります。

Turbolinksとは

ページ上のリンクをクリックした時に、ページ全体をリロードさせるのではなく、bodyタグの中身とheadの中のtitleを同一ページ上で書き換える方法。
.jsとか.cssとか処理し直さないので、ページの読み込みがかなり早くなる。

↓こんなにごちゃごちゃ読み込んでたのが…
turbolinks

↓こうなったり、、、するので早いのは当然。
turbolinks

問題

下のようにjQuery(coffee script)を書いている場合は動かない。

jQuery ->
  $('.selector').on 'click', '.selector2', (event) ->
  $(this).prev('input[type=hidden]').val(1)

なぜって、リロードしてるように見えて実際には同一ページのままだから。
$(document).ready()が発火しない。

.ready() Description: Specify a function to execute when the DOM is fully loaded.

なので、
下記のように変更する。

ready = ->
  $('.selector').on 'click', '.selector2', (event) ->
  $(this).prev('input[type=hidden]').val(1)

$(document).ready(ready)
$(document).on('page:load', ready)

ドキュメント:
rails/turbolinks

何かありましたらコメントをどうぞ

comments powered by Disqus

人気の記事

950 Points チリ出身のギタリストが弾くドラゴンボールZがむちゃくちゃかっこいい…
774 Points Wordpress + Heroku + PostgreSQL + Amazon S3 = ¥0 / 無料でサイト運営
700 Points Rubyのチートシート 変数 / クラス / モジュール
524 Points Rubyのチートシート / アクティブサポート
451 Points 紙のデザイナーがウェブ開発できるようになるまでに必要なこと
435 Points Rails / Google Analyticsのデータを使って分析や管理画面のためのグラフをつくる
323 Points RailsとHerokuでノーティフィケーションをプッシュする / PusherとTurbolinksの兼ね合い
222 Points Rails / RSpec テスト書いたことない メンドクサイ(n´Д`)という時のチートシート
193 Points Rails / Ajaxを使って画面遷移しない一時保存機能をつける
193 Points Protractorでスクレイピングしてみた