railsでjQueryが作動しない

前提・実現したいこと

railsのアプリケーションでスマートニュースやグノシーのような、スワイプタブ切替機能を実装したいと思っています。

参考記事に合わせて、jQueryのプラグインbxSliderを読み込んで、common.jsでイベントを指定しています

しかし、思ったような挙動が起こらず、調べてみるとjqueryが当たっていないようです

また、common.jsにconsole.log()を入れても表示されませんでした。代わりにjquery周りのエラーが出ます

jQueryはこの方法で用いています。

html.erb上でインラインでjqueryを使ったスクリプトは作動します。

発生している問題・エラーメッセージ

jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3819 jQuery.Deferred exception: $(...).bxSlider is not a function TypeError: $(...).bxSlider is not a function
    at HTMLDocument.<anonymous> (http://localhost:3000/assets/common.self-baf0e50fd23769d585e94bf678276fa5fab93867ae3de32f8dfbb963ceea6b5a.js?body=1:17:29)
    at mightThrow (http://localhost:3000/assets/jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3535:29)
    at process (http://localhost:3000/assets/jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3603:12) undefined
jQuery.Deferred.exceptionHook @ jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3819
process @ jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3607
setTimeout (async)
(anonymous) @ jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3641
fire @ jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3269
fireWith @ jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3399
fire @ jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3407
fire @ jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3269
fireWith @ jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3399
ready @ jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3879
completed @ jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3889
jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3601 [Violation] 'setTimeout' handler took 138ms
[Violation] Forced reflow while executing JavaScript took 126ms
on_content_end.js:54 on_content_end ==>response to loadPagePattern, href=http://localhost:3000/coupons, pattern.id=undefined
jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3828 Uncaught TypeError: $(...).bxSlider is not a function
    at HTMLDocument.<anonymous> (common.self-baf0e50fd23769d585e94bf678276fa5fab93867ae3de32f8dfbb963ceea6b5a.js?body=1:17)
    at mightThrow (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3535)
    at process (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3603)

該当のソースコード

ruby
1app/assets/javascripts/application.js
2
3//= require rails-ujs
4//= require activestorage
5//= require turbolinks
6//= require jquery
7//= require jquery_ujs
8//= require_tree ../../../vendor/assets/javascripts/.
9//= require_tree .
10//= require cocoon
11

common.jsはapplication.jsと同じディレクトリに

js
1assets/javascripts/common.js
2$(document).ready(function(){
3
4/******************************************
5事前準備
6*******************************************/
7
8//タブボタンの数を取得
9var tabQuantity = $('.tab__button').length;
10
11//タブの長さとボディの長さの差分を取得
12var tabExtraDistance = $('.tab').width() - $('.tabContainer').width();
13
14/******************************************
15スライダー発動

jquery.bxslider.min.jsはvendor/assets/javascripts/以下に

js
1vendor/assets/javascripts/jquery.bxslider.min.js
2/**
3 * bxSlider v4.2.12
4 * Copyright 2013-2015 Steven Wanderski
5 * Written while drinking Belgian ales and listening to jazz
6 * Licensed under MIT (http://opensource.org/licenses/MIT)
7 */
8!function(t){var e={mode:"horizontal",slideSelector:"",infiniteLoop:!0,hideControlOnEnd:!1,speed:500,easing:null,slideMargin:0,startSlide:0,randomStart:!1,captions:!1,ticker:!1,tickerHover:!1,adaptiveHeight:!1,adaptiveHeightSpeed:500,video:!1,us・・・

maisumakun

2019/04/19 08:16

「html.erb上でインラインでjqueryを使ったスクリプトは作動します。」とありますが、それはbxSliderも含めてでしょうか。

joru

2019/04/19 08:18

bxSliderではなくて <h1>Ajax#index</h1> <p id="hoge">赤色になるよ</p> <script> $("#hoge").css("color","red") </script> を入れて確認したところに留まってます

行動規範の内容に同意します

回答1件

ベストアンサー

エラーの文言を読む限り、bxSliderの読み込みに失敗しているようにも見えます。

vendor/assets/javascripts以下であれば、相対参照を使わなくても//= require jquery.bxslider.minで参照できるかと思います。

投稿2019/04/19 08:22

maisumakun

総合スコア145183

joru

2019/04/19 08:24

変更してみたところ、いまだにエラー内容は同じままです... Navigated to http://localhost:3000/coupons application.js:18 Hello World from Webpacker jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3819 jQuery.Deferred exception: $(...).bxSlider is not a function TypeError: $(...).bxSlider is not a function at HTMLDocument.<anonymous> (http://localhost:3000/assets/common.self-baf0e50fd23769d585e94bf678276fa5fab93867ae3de32f8dfbb963ceea6b5a.js?body=1:17:29) at mightThrow (http://localhost:3000/assets/jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3535:29) at process (http://localhost:3000/assets/jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3603:12) undefined jQuery.Deferred.exceptionHook @ jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3819 process @ jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3607 setTimeout (async) (anonymous) @ jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3641 fire @ jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3269 fireWith @ jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3399 fire @ jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3407 fire @ jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3269 fireWith @ jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3399 ready @ jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3879 completed @ jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3889 on_content_end.js:54 on_content_end ==>response to loadPagePattern, href=http://localhost:3000/coupons, pattern.id=undefined jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3828 Uncaught TypeError: $(...).bxSlider is not a function at HTMLDocument.<anonymous> (common.self-baf0e50fd23769d585e94bf678276fa5fab93867ae3de32f8dfbb963ceea6b5a.js?body=1:17) at mightThrow (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3535) at process (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3603)

maisumakun

2019/04/19 08:39

ハッシュ値が先程と変わっていない（書き換えた後のJavaScriptを見ていない）ようです。

joru

2019/04/19 08:51

ハッシュ値について検索して見たのですが、確認方法がわからず、ひとまず前回忘れていたrails sの再起動を行なってもう一度リクエストしました jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3819 jQuery.Deferred exception: $(...).bxSlider is not a function TypeError: $(...).bxSlider is not a function at HTMLDocument.<anonymous> (http://localhost:3000/assets/common.self-baf0e50fd23769d585e94bf678276fa5fab93867ae3de32f8dfbb963ceea6b5a.js?body=1:17:29) at mightThrow (http://localhost:3000/assets/jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3535:29) at process (http://localhost:3000/assets/jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3603:12) undefined jQuery.Deferred.exceptionHook @ jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3819 process @ jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3607 setTimeout (async) (anonymous) @ jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3641 fire @ jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3269 fireWith @ jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3399 fire @ jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3407 fire @ jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3269 fireWith @ jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3399 ready @ jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3879 completed @ jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3889 on_content_end.js:54 on_content_end ==>response to loadPagePattern, href=http://localhost:3000/coupons#, pattern.id=undefined jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3828 Uncaught TypeError: $(...).bxSlider is not a function at HTMLDocument.<anonymous> (common.self-baf0e50fd23769d585e94bf678276fa5fab93867ae3de32f8dfbb963ceea6b5a.js?body=1:17) at mightThrow (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3535) at process (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3603)

joru

2019/04/19 08:53

ハッシュ地というのは5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad こちらでしょうか？であるともう一度同じjsを見ているということですね。 rails sの再起動以外で対応方法はありますでしょうか？

行動規範の内容に同意します