1
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 1 year has passed since last update.

JavaScriptが画面をリロードしないと表示できない問題を解決

Last updated at Posted at 2022-03-21

はじめに

1月〜プログラミングスクールで学習しています。
これから平日は~3/25まで毎日何かしらアウトプットのため投稿を続ける予定です。
今回はオリジナルアプリ作成時に起きたJavaScriptが画面をリロードしないと表示できない問題について書きます。
※Ruby2.6.5の環境を使用し学習しています。

問題

自動計算機能をjavascriptで実装しましたが、何故かリロードしないとうまく機能しません。
a2cbd6e59b6113689b8c4dd1ca09d2c7.gif

解決方法

どうやらturbolinksが原因となっていたようです。
application.jsのturbolinksを読み込んでいる行を削除することで上記の問題は解決しました。

app/javascript/packs/application.js
require("@rails/ujs").start()
require("turbolinks").start() //この行を削除
require("@rails/activestorage").start()
require("channels")

turbolinksによって画面遷移は高速化しますが、次ページのHTML要素だけを読み取って表示するため、JavaScriptファイルが読み込まれず、JavaScriptにて設定したイベントが発火しないケースがあるようです。

1
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
1
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?