RailsでECサイトを作成中に、一部ボタンが動作しないことがあり、turbolinksを一部無効化することで解決しました。
そもそもturbolinksとは何ぞや状態だったので、備忘録として残しておきます。
#turbolinksとは
ページ遷移をAjaxに置き換えることで、JavaScriptやCSSのパースを省略することで高速化するgemのこと。
Railsにデフォルトで入っているやつ。
#完全にturbolinksを無効化する方法
※ turbolinksを完全無効化すると、他の高速化するgemを入れたりする必要があるので、
私のような初心者は、特別なことがない限りおすすめしないです。
###1. gemを無効化する
Gemfile
#コメントアウトをする
#gem 'turbolinks'
ターミナル
$ bundle update
###2. application.jsを編集
application.js
// 変更前
//= require turbolinks
// 変更後
// require turbolinks
###3. application.html.slimを編集
application.html.slim
/ 変更前
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
= javascript_include_tag 'application', 'data-turbolinks-track': 'reload'
/ 変更後
= stylesheet_link_tag 'application', media: 'all'
= javascript_include_tag 'application'
#一部を無効化する方法
###1. JavaScriptを編集する方法
・.jsファイルの場合
hoge.js
$(document).on('turbolinks:load', function() {
// turbolinksを無効化したい処理を入れる
});
・.coffeeファイルの場合
hoge.coffee
$(document).on 'turbolinks:load', ->
# turbolinksを無効化したい処理
###2. リンクを編集する方法
・link_toに追加する場合
hoge.html.slim
= link_to '', root_path, 'data-turbolinks': false
'data-turbolinks': false をlink_toに追加すれば無効化できます。
・divの場合
hoge.html.slim
div data-turbolinks='false'
= link_to '', root_path