27
24

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

RailsでリロードしないとJavaScriptが起動しない時

Last updated at Posted at 2015-12-13

 Rails4.2でJavaScriptを書いている時、最初のページ遷移ではJSが上手く起動せず、リロードすると起動することがあります。Rails4からデフォルトで使用できるturbolinksというgemが、問題を起こしているらしいです。Getでページ遷移する時、jQueryのreadyイベントが起きないため、例えば$(function(){})に入ってる処理が実行されなくなってしまいます。

 この時に役に立つのがjquery-turbolinksというgemです。こちらを参考にしてみてください。

Gemfileに以下を追加する

Gemfile
gem 'jquery-turbolinks'

Bundle installする

ターミナル
$ bundle install
// bundleだけでも可

サーバーを再起動することを忘れずに。

app/assets/javascripts/application.jsに以下の行を加える

app/assets/javascripts/application.js
//= require jquery.turbolinks

この時、付け足す場所が重要らしく、//= require jqueryより後で、//= require turbolinksより前に記述する。例えばこのような感じ。

app/assets/javascripts/application.js
//= require jquery
//= require jquery_ujs
//= require jquery.turbolinks
//= require turbolinks
//= require bootstrap
//= require_tree .

あとは、様々なイベントによって、readyの代わりに以下を使い分ける:
page:fetch
page:load
page:restore
page:change
イベントは他にもあるので、こちらを参考にしてください。

27
24
0

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
27
24

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?