【Rails】リロードしないとJavaScriptが動かない!【簡単に解決】
はじめに
以前jQuery
を使ってタブメニューの切り替えを実装したときに、
ビューを開いた初回は非同期で切り替わるのに、
別のページに移動したり
「戻る」ボタンを押したあと再びタブメニュー画面に戻ると、、、、
動かない、、、!なぜだ、、!
なんて経験をして1日無駄にしたことがあります。
jQueryやビュー画面のコードは間違ってないはず!なぜ!って人向けの記事です。
解決方法①
各link_to
ごとにturbolinks
とやらを無効にすればOKです。簡単です。
<%= link_to "ホーム", root_path, data: {"turbolinks" => false} %>
data: {“turbolinks" => false}
は遷移先ページのみturbolinks
を切ることが出来ます。
※turbolinks
とは、ページ遷移をAjax
に置き換え、JavaScript
やCSS
のパース(解析・変換)を省略することで高速化するgem
で、Rails4
からはデフォルトで使用されています。↓
gem 'turbolinks', '~> 5'
解決方法②
js
ファイルに"turbolinks:load"
を記述すればOKです。簡単です。
document.addEventListener("turbolinks:load", function() {
// ...
})
まとめ
turbolinks
を無効化する方法として、gem
ファイルから直接削除する方法もあるようですが、
元々turbolinks
はページの読み込みを高速化するgemです。
ボタンを押すたびに画面が初期化され、
一旦真っさらになった後、再度js
やらcss
を読み直す。。。待ってられません。
その辺の処理をTurbolinks5
が全部やってくれているんです。
なるべく
①個別のページ(link_toごと)に無効にするか、
②jsファイルにコードを加えるだけにしましょう。
Author And Source
この問題について(【Rails】リロードしないとJavaScriptが動かない!【簡単に解決】), 我々は、より多くの情報をここで見つけました https://qiita.com/shibata0406/items/861df68467f3bee22a94著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .