Railsで以下のような事態に遭遇しました。
くるみ
- 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になったらしい。
言われてみれば遷移の速度が異常に早かったわ…
ブログ主
$(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内のこの記述を削除してあげれば完了です。
くるみ
まとめ
参考になれば幸いです!では⸝⸝- ̫ -⸝⸝