Zenn
🐷

chart.js リロードしないとグラフが表示されない

2023/07/06に公開
Rails
プログラミング初心者
Chart.js
tech

🍍今の状況

  • 新しい本を作る
    ↓
  • Book detailに飛ばされる
    ↓
  • Userのshowページへ戻る
    グラフがない！！！
    ↓
  • ページをリロードするとグラフ表示される

1度リロードしないとJavaScriptが適応されない問題が生じている。

🍍解決方法

JSの表示を邪魔するのはturbolinksみたいです。

turbolinksとは？？と思ったら↓

UserのshowページでのTurbolinksを無効化させる

$(document).on('turbolinks:load', function() {ここの部分にturbolinks:loadを記入することでTurbolinksを無効化させることができ、Userのshowページに遷移する

特定のリンクでのTurbolinksを無効化させる

aタグ(link_to)にdata: {"turbolinks" => false}を加えることによってTurbolinksを無効化し、遷移先に飛ぶようにすることでJSを正常に動作できる.

追記後のコード↓↓↓

_header.html.erb
<%= link_to user_path(current_user),data: {"turbolinks" => false}, class: 'nav-link text-light' do %>
         <i class="fas fa-home"></i> Home
<% end %>

これで解決しました！🎉

💎ここで疑問に思ったのは、なんで2回も無効化の記述しなければならないの？

https://qiita.com/ginger-yell/items/740818f484bfbc1edb4d#jsの表示を邪魔するのは

やはり、この記事を参考にさせてもらったがどちらか一方を無効化するだけでできるみたいだ。
どちらか片方の追記だけでいいのか？と思って、まずは最初に記入したturbolinks:loadを削除したがやはりグラフが消えてしまう。

私の場合どちらも記入していないとうまく表示ができなかった。
👺👺👺ここは疑問点なので分かり次第追記したい。

🍍まとめ

turbolinksによって画面遷移は高速化するが次ページのHTML要素だけを読み取って表示するため、JavaScriptファイルが読み込まれず、JavaScriptにて設定したグラフが表示されなくなっていた。
turbolinksを無効化することで正常に表示されるようになった。

Discussion