0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

ページ移動時のエラー[Uncaught TypeError: Cannot read property 'classList' of null]解決

Posted at

はじめに

タイトルについて記事にしました。
この記事で得る内容は以下の通りです。

・ HTML,JavaScriptの基礎知識が増える
・ turbolinksについて
・ エラーMSG[Uncaught TypeError: Cannot read property 'classList' of null]の解決方法

■ 参考
5分でわかるTurbolinks入門【Ruby on Rails】
turbolinksチートシート

haml.jpeg

サイトの中にトップに戻るボタンがあり、リンク先に移動すると、指定したclassListがないと怒られています
トップに戻るボタンのJSファイルをjavascript_pack_tagでリンク元だけ指定しているのですが・・・

コンソール

スクリーンショット 2020-12-17 11.23.31.png

原因

大元のapplication.html.hamlにあるdata-turbolinks-trackを疑ってみました

・ data-turbolinks-track

・ Rails4.0から採用されたgemで最初からインストールされている
・ Webアプリケーションの動作を速くする
a hrefタグでのページ遷移時、JSや他の要素を読み込まずにbody要素だけ入れ替える
→ つまり、リンク元のJSをそのまま持ってきて、エラーを引き起こしている

解決方法

該当のa hrefタグのみturbolinksを無効にします(直接指定するか、親要素に指定してもOK)

index.html.haml
%a(data-turbolinks="false"){href: hoge_index_path}

便利なんだか、不便なんだか・・・公式採用するくらいならメリット100%のやつ作れよ('A`)ボソッ

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?