Railsの作成中に Uncaught ReferenceError: $ is not defined がでた
Railsの作成中に Uncaught ReferenceError: $ is not defined がでた:
jQueryを使いたい場合は、head内でjQueryを記述するjsファイルを読み込む必要がありますが、RailsではデフォルトでjQueryが使えるようになっているため、特に何かする必要はありません。のはずが、JQueryを実装してみたところコンソール画面にこのようなエラーが
JS自体は動作確認できていたのでおそらくJQueryが正しくローディングされていないようです。
Railsが自動で読み込んでくれないので手動で直していきます。
まずこちらのファイルを確認。
ここに次のコードを追加
ただ注意したいのが読み込まれる順番です。require_tree .の下に追加すると読み込みでまたエラーが出る可能性があるので上に足します。
railsでJQueryを動かすgemをインストールします。
Gemfileに以下のコードを追加
Gemfileを更新したので
を実行します。
忘れると反映されません。
これで無事にJQueryが動きました。
根本的にどこに原因があるのかわかる方、いらっしゃいましたら教えていただけるとありがたいです。
Railsの初期セットアップでJQueryが読み込まれない
jQueryを使いたい場合は、head内でjQueryを記述するjsファイルを読み込む必要がありますが、RailsではデフォルトでjQueryが使えるようになっているため、特に何かする必要はありません。のはずが、JQueryを実装してみたところコンソール画面にこのようなエラーがUncaught ReferenceError: $ is not definedJQueryのコードはこちら
sample.js
window.addEventListener("load", function () { $("li").on("click", function () { $("li.selected").removeClass("selected"); $(this).addClass("selected"); }); });
解決方法
application.jsの見直し
Railsが自動で読み込んでくれないので手動で直していきます。まずこちらのファイルを確認。
app/assets/javascripts/application.js
//= require rails-ujs //= require activestorage //= require turbolinks //= require_tree .
//= require jquery //= require jquery_ujs //= require jquery.turbolinks
app/assets/javascripts/application.js
//= require jquery //= require jquery_ujs //= require jquery.turbolinks //= require rails-ujs //= require activestorage //= require turbolinks //= require_tree .
gemのアップデート
railsでJQueryを動かすgemをインストールします。Gemfileに以下のコードを追加
Gemfile
gem 'jquery-rails' gem 'jquery-turbolinks'
$ bundle update
を実行します。
Rails serverを立ち上げ直す
忘れると反映されません。これで無事にJQueryが動きました。
根本的にどこに原因があるのかわかる方、いらっしゃいましたら教えていただけるとありがたいです。
コメント
コメントを投稿