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

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

という方に向けて「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とは、

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

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

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

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

勉強になりました。

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内のこの記述を削除してあげれば完了です。

まとめ

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