【Rails】ページを更新しないとJavaScriptが動かない時の対処法

Railsでページを更新しないとJavaScriptが動かない時

Railsで以下のような事態に遭遇しました。

くるみ

ページを更新しないとjsが動かないんだけど…
ということで今回は

  • Railsで、ページを更新しないとJavaScriptが動かない
  • Turbolinksを無効にしてjsを動かしたい

という方に向けて「Railsで更新しないとJavaScriptが動かない時の対処法」をまとめました。

単なる備忘録ではありますが参考になれば幸いです⸝⸝- ̫ -⸝⸝

ページを更新しないとJavaScriptが動かない

作っていたポートフォリオにて、headerを「postion:fixed」で固定したことにより上のように直下の要素と重なってしまったので、

$(function() {
  var height=$("header").height();
  $("body").css("margin-top",height + 50);
});

application.jsにこのように記述してヘッダーの下に余白を設けることにしました。

すると無事このようにheaderと直下の要素の間に余白が生まれいい感じになったのですが…

とあるページからこのページに「redirect_to」でリダイレクトしてくると…

あれれJavaScriptが効いてない…?

そう、ページを更新(リロード)しないとJavaScriptが動かないのです。

ということで対処法を調べることに。

Railsでページを更新しないとJavaScriptが動かない時の対処法

まず結論から。

$(document).on ("turbolinks:load", function(){
  var height=$("header").height();
  $("body").css("margin-top", height + 50);
});

以上のようにjsのコードを書き換えると解決しました。

ブログ主

やったぜ…けど原因について調べよか

原因

調べた結果、戦犯は「Turbolinks」でした。

Turbolinksとは、

  • 何かリンクをクリックした時にページ全体を読み込むのではなくheadの一部とbodyの中だけを書き換え、読み込みの高速化をしてくれる

機能らしいです。Rails4からデフォルトのGemになったらしい。

言われてみれば遷移の速度が異常に早かったわ…

ブログ主

知らなんだ
そんな便利なTurbolinksによって、一見新しいページが読み込まれてるように見えて実は同じページのままになっているのでJavaScriptが動かない、ということだったんですね。

$(document).on ("turbolinks:load", function(){
(以下略)

なのでこの「turbolinks:load」でページ遷移時でも動くようになると。

勉強になりました。

参考 Rails で JavaScript を使用するRailsガイド

Turbolinksを無効にする方法

読み込み速度は落ちますが、Turbolinksを無効にする方法もあります。

Gemfileへの記述を削除

# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'

ここを消すなりコメントアウトしてあげてから

bundle install

をしてあげます。

application.jsの記述を削除

//= require turbolinks

application.jsのこの行を削除してあげます。

application.html.erbの記述を削除

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

head内のこの記述を削除してあげれば完了です。

お疲れ様!

くるみ

まとめ

以上、Railsでページを更新しないとJavaScriptが動かない時の対処法でした。

参考になれば幸いです!では⸝⸝- ̫ -⸝⸝

コメントを残す