JavaScript
Rails
js
turbolinks
Rails5

Railsでページ読み込みしないとjsが効かないのを解決する方法

今回陥った事象

aタグやlink_toメソッドでページ遷移するとjsが効いていない。ページをリロードするとjsが効いている。

ググった結果

turbolinksの仕業(おかげ?)らしい。

tubolinksの役割

  • TurbolinksはRails4.0からデフォルトで導入されたgem
  • railsアプリケーションを 簡単に pjaxっぽくすることが出来る。
  • ajaxとhistoryAPI(popState, pushState)を利用して画面遷移
  • Turbolinksで遷移する場合は、titleとbodyとcsrfトークンを変更する
  • csrfトークンは変更された場合のみ
  • js, cssの読み込みを初回時に行い次回以降の読み込み処理を省略することで高速化する。

解決方法

link_toにdata: {"turbolinks"=>false}を指定してあげるとturbolinkによるAjaxを無効にでき、jsが読み込まれるようになる。

link_to "HOME", root_path, data: {"turbolinks" => false}

turbolinksを無効にしたくない方はこちらを参考に

https://qiita.com/saboyutaka/items/bcc0966313c6f7399a6e

参考

  1. Rails 5.0でlink_toでturbolinkを無効にする法
  2. 【Ruby】【Rails】link_toで遷移した後、JavaScriptが動かない場合
  3. Turbolinksをオフしないためにやった事