どうもおはようポテト(@ohayoupoteto22)です。
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が動かないのです。
ということで対処法を調べることに。
対処法
まず結論から。
$(document).on ("turbolinks:load", function(){
var height=$("header").height();
$("body").css("margin-top", height + 50);
});以上のようにjsのコードを書き換えると解決しました。
ブログ主
原因はTurbolinksだった
調べた結果、戦犯は「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 turbolinksapplication.jsのこの行を削除してあげます。
application.html.erbの記述を削除
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>head内のこの記述を削除してあげれば完了です。
くるみ
結論：RailsでJavaScriptが動かない時はTurbolinksを疑おう
以上になります。
どうでもいいですけど「ターボリンクス」って響きカッコいいですよね。
最後まで読んでいただきありがとうございました！では⸝⸝- ̫ -⸝⸝
