...

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

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

どうもおはようポテト(@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 turbolinks

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

application.html.erbの記述を削除

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

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

お疲れ様!

ソロモン

結論:RailsでJavaScriptが動かない時はTurbolinksを疑おう

以上になります。

どうでもいいですけど「ターボリンクス」って響きカッコいいですよね。

最後まで読んでいただきありがとうございました!では⸝⸝- ̫ -⸝⸝

参考になったらシェアしよう

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA