質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

850閲覧

railsでjQueryが作動しない

joru

総合スコア45

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2019/04/19 05:19

編集2019/04/19 05:23

前提・実現したいこと

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

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

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

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

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

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

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

dropdown-menu.self-5794b6ca26364ce522cb47a8ef050870fda0b886cfeef69ec27ef116900f1984.js?body=1:121 Uncaught TypeError: $(...).aaDropdownMenu is not a function at HTMLDocument.onDOMReady (dropdown-menu.self-5794b6ca26364ce522cb47a8ef050870fda0b886cfeef69ec27ef116900f1984.js?body=1:121) at HTMLDocument.dispatch (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:5184) at HTMLDocument.elemData.handle (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:4992) at Object.e.dispatch (turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:6) at r.notifyApplicationAfterPageLoad (turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:7) at r.pageLoaded (turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:7) at turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:6 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: $(...).aaDropdownMenu is not a function at HTMLDocument.onDOMReady (dropdown-menu.self-5794b6ca26364ce522cb47a8ef050870fda0b886cfeef69ec27ef116900f1984.js?body=1:121) at mightThrow (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3535) at process (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3603) jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3828 Uncaught TypeError: elems.sortable is not a function at init_sortable (has_many.self-ece319debdc01ca5096ae8ac6c130ffc0decab382543b4b94e18591375d3d3bb.js?body=1:42) at HTMLDocument.<anonymous> (has_many.self-ece319debdc01ca5096ae8ac6c130ffc0decab382543b4b94e18591375d3d3bb.js?body=1:35) at mightThrow (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3535) at process (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3603) jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3828 Uncaught TypeError: $(...).perPage is not a function at HTMLDocument.onDOMReady (per_page.self-ac2a7829e00b21d672b908a9a64b42aef7632ff1dac9a90dda0e779706c71256.js?body=1:63) at mightThrow (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3535) at process (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3603) jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3828 Uncaught TypeError: $(...).tabs is not a function at HTMLDocument.onDOMReady (tabs.self-5bccad3e0e615bd96bf323490a71829beec067511af628e9808993bb6beeb3a5.js?body=1:5) at mightThrow (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3535) at process (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3603) jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3828 Uncaught TypeError: $(...).bxSlider is not a function at HTMLDocument.<anonymous> (common.self-254867e35121332cc517676b19286d47dcc7ed9a91c5f428dbe2777f9c9873d4.js?body=1:17) at mightThrow (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3535) at process (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:3603) dropdown-menu.self-5794b6ca26364ce522cb47a8ef050870fda0b886cfeef69ec27ef116900f1984.js?body=1:121 Uncaught TypeError: $(...).aaDropdownMenu is not a function at HTMLDocument.onDOMReady (dropdown-menu.self-5794b6ca26364ce522cb47a8ef050870fda0b886cfeef69ec27ef116900f1984.js?body=1:121) at HTMLDocument.dispatch (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:5184) at HTMLDocument.elemData.handle (jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:4992) at Object.e.dispatch (turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:6) at r.notifyApplicationAfterPageLoad (turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:7) at r.visitCompleted (turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:7) at r.complete (turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:6) at r.<anonymous> (turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:6) at turbolinks.self-569ee74eaa15c1e2019317ff770b8769b1ec033a0f572a485f64c82ddc8f989e.js?body=1:6

該当のソースコード

app/assets/javascripts/jquery.bxslider.min.js

erb

1app/views/coupons/index.html.erb 2 3<div class="container"> 4 <div class="tabContainer"> 5 <div class="tab"> 6 <% @selected_categories.each do |category| %> 7 <div class="tab__button"><a href="#"><%= category.name %></a></div> 8 <!-- 一つ目にclassでactive追加しなくては --> 9 <% end %> 10 <script> 11 $(".tab__button:first-child").addClass("active"); 12 </script> 13 </div> 14 </div> 15 <div class="contents"> 16 <% @selected_categories.each do |category| %> 17 <div class="contents__content"> 18 <% category.coupons.each do |coupon| %> 19 <div class="coupon-thumbnail"> 20 <%= link_to coupon do %> 21 <%= image_tag coupon.image.to_s %> 22 <% end %> 23 </div> 24 <% end %> 25 </div> 26 <% end %> 27 </div> 28</div>

js

1app/assets/javascripts/common.js 2 3$(document).ready(function(){ 4 5/****************************************** 6事前準備 7*******************************************/ 8 9//タブボタンの数を取得 10var tabQuantity = $('.tab__button').length; 11 12//タブの長さとボディの長さの差分を取得 13var tabExtraDistance = $('.tab').width() - $('.tabContainer').width(); 14 15/****************************************** 16スライダー発動 17*******************************************/ 18 19var slider = $('.contents').bxSlider({ 20 pager:false, 21 controls:false, 22 onSlideBefore: function($slideElement, oldIndex, newIndex){ 23 //スライドする時に関数を呼び出す。newIndexはスライダーの現在地。 24 slideChange(newIndex); 25 } 26}); 27 28/****************************************** 29スライドする時に発動する関数。タブの表示調整を行う。 30*******************************************/ 31 32function slideChange(newIndex){ 33 34 //クラスを調整 35 $('.tab__button').removeClass('active'); 36 $('.tab > div:nth-child(' + ( newIndex + 1 ) + ')').addClass('active'); 37 38 //スクロールするべき距離を取得。タブ全体の長さ / ( タブの個数 - 1 ) * スライドの現在地 39 var scrollDestination = ( tabExtraDistance / (tabQuantity - 1) ) * ( newIndex ); 40 41 //スクロール位置を調整 42 $('.tabContainer').animate({ scrollLeft: scrollDestination }, 'slow'); 43 44} 45 46/****************************************** 47タブボタンクリックで発動する関数 48*******************************************/ 49 50$('.tab__button').on('click',function(e){ 51 52 //何番目の要素かを取ってスライドを移動する 53 var nth = $('.tab__button').index(this); 54 slider.goToSlide(nth); 55 56 //クリックイベントを無効化 57 e.preventDefault(); 58 59}) 60 61console.log("読み込めてるで"); 62 63}); 64

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

エラーメッセージ中にちらほらturbolinksという文言が見えることから、おそらくはturbolinksが有効な環境なのではないかと思います。

turbolinksを使った場合、

  • ページ遷移をturbolinksが行うため、$(function(){})は最初のページロード時にしか起きない
  • 全ページに対して同じJavaScriptファイルが適用されるので、「このページにだけ使いたいJavaScriptがある」という場合に工夫が必要になる

など、通常のブラウザ環境とは大きく異なってきます。使いこなせないのであれば、turbolinksを切ってしまうのも1つの選択肢です。

投稿2019/04/19 05:34

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

joru

2019/04/19 05:36

maisumakun様 ご指摘ありがとうございます! 一度turbolinksをしっかり調べて見て、切るかどうか検討して見ます 解決への方針が立ち、とても助かりました! ありがとうございます
guest

0

よくわかってないですけどjQueryってこう書くんじゃなかったでしたっけ?

$(function(){ $(document).ready(function(){ ... }); });

投稿2019/04/19 05:28

keng

総合スコア32

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

maisumakun

2019/04/19 05:31

$(function(){})は、$(document).ready(function(){})と同じ意味です。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問