はじめに
タイトルについて記事にしました。
この記事で得る内容は以下の通りです。
・ HTML,JavaScriptの基礎知識が増える
・ turbolinksについて
・ エラーMSG[Uncaught TypeError: Cannot read property 'classList' of null]の解決方法
■ 参考
・ 5分でわかるTurbolinks入門【Ruby on Rails】
・ turbolinksチートシート
例
サイトの中にトップに戻るボタンがあり、リンク先に移動すると、指定したclassListがないと怒られています
トップに戻るボタンのJSファイルをjavascript_pack_tag
でリンク元だけ指定しているのですが・・・
コンソール
原因
大元のapplication.html.haml
にあるdata-turbolinks-track
を疑ってみました
・ data-turbolinks-track
・ Rails4.0から採用されたgemで最初からインストールされている
・ Webアプリケーションの動作を速くする
・ a href
タグでのページ遷移時、JSや他の要素を読み込まずにbody
要素だけ入れ替える
→ つまり、リンク元のJSをそのまま持ってきて、エラーを引き起こしている
解決方法
該当のa href
タグのみturbolinksを無効にします(直接指定するか、親要素に指定してもOK)
%a(data-turbolinks="false"){href: hoge_index_path}
便利なんだか、不便なんだか・・・公式採用するくらいならメリット100%のやつ作れよ('A`)ボソッ