LoginSignup
160
179

More than 5 years have passed since last update.

Rails5でjqueryを動かす方法

Last updated at Posted at 2017-06-21

概要

jqueryを使うと初回ページ読み込み&リロードで動くが、ページ遷移して該当ページに戻ってくるとjqueryが動かない。
デフォルトgemであるturbolinks(ajaxとajaxとhistoryAPIを使ってページ遷移しやすくするもの)が動作しているため、そもそも$(document).ready()が動かない

Rails4以前

Rails4以前までは、jquery-turbolinksを使っていた
gem 'jquery-turbolinks'
bundle install
application.jsのrequire jqueryと、require torbolinksの間に
//= require jquery.turbolinks
を記述。

Rails5以降はこう

目的によって使い分けができる。

素のjsの場合

app/assets/javascripts/script.js
//初回読み込み、リロード、ページ切り替えで動く。
$(document).on('turbolinks:load', function() { });

//初回読み込み、ページ切り替えで動く。リロードは動かない
$(document).on('turbolinks:render', function() { });

//ページ遷移前に行いたい処理用。ページ切り替えでもリロードでも動かない
$(document).on('turbolinks:request-start', function() { });

coffeeの場合

app/assets/javascripts/script.js
//初回読み込み、リロード、ページ切り替えで動く。
$(document).on 'turbolinks:load', -> 

//初回読み込み、ページ切り替えで動く。リロードは動かない
$(document).on 'turbolinks:render', -> 

//ページ遷移前に行いたい処理用。ページ切り替えでもリロードでも動かない
$(document).on 'turbolinks:request-start', ->

'turbolinks:load'としておけば間違いないです。jquery-turbolinksの読み込みも必要なし!

renderやrequest-startはどんなケースで使えるのか誰か教えてくださいm(_ _)m

参考:
http://taillook.hateblo.jp/entry/2017/02/07/010750
http://qiita.com/syou007/items/fda40f65634bb2fadf36

160
179
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
160
179