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

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

ただいまの
回答率

88.79%

railsでjQueryが作動しない

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 655

joru

score 40

前提・実現したいこと

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

app/views/coupons/index.html.erb

<div class="container">
  <div class="tabContainer">
    <div class="tab">
      <% @selected_categories.each do |category| %>
        <div class="tab__button"><a href="#"><%= category.name %></a></div>
        <!-- 一つ目にclassでactive追加しなくては -->
      <% end %>
      <script>
        $(".tab__button:first-child").addClass("active");
      </script>
    </div>
  </div>
  <div class="contents">
    <% @selected_categories.each do |category| %>
      <div class="contents__content">
        <% category.coupons.each do |coupon| %>
          <div class="coupon-thumbnail">
            <%= link_to coupon do %>
              <%= image_tag coupon.image.to_s %>
            <% end %>
          </div>
        <% end %>
      </div>
    <% end %>
  </div>
</div>
app/assets/javascripts/common.js

$(document).ready(function(){

/******************************************
事前準備
*******************************************/

//タブボタンの数を取得
var tabQuantity = $('.tab__button').length;

//タブの長さとボディの長さの差分を取得
var tabExtraDistance = $('.tab').width() - $('.tabContainer').width();

/******************************************
スライダー発動
*******************************************/

var slider = $('.contents').bxSlider({
    pager:false,
    controls:false,
    onSlideBefore: function($slideElement, oldIndex, newIndex){
        //スライドする時に関数を呼び出す。newIndexはスライダーの現在地。
        slideChange(newIndex);
    }
});

/******************************************
スライドする時に発動する関数。タブの表示調整を行う。
*******************************************/

function slideChange(newIndex){

    //クラスを調整
    $('.tab__button').removeClass('active');
    $('.tab > div:nth-child(' + ( newIndex + 1 ) + ')').addClass('active');

    //スクロールするべき距離を取得。タブ全体の長さ / ( タブの個数 - 1 ) * スライドの現在地
    var scrollDestination = ( tabExtraDistance / (tabQuantity - 1) ) * ( newIndex );

    //スクロール位置を調整
    $('.tabContainer').animate({ scrollLeft: scrollDestination }, 'slow');

}

/******************************************
タブボタンクリックで発動する関数
*******************************************/

$('.tab__button').on('click',function(e){

    //何番目の要素かを取ってスライドを移動する
    var nth = $('.tab__button').index(this);
    slider.goToSlide(nth);

    //クリックイベントを無効化
    e.preventDefault();

})

console.log("読み込めてるで");

});
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

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

turbolinksを使った場合、

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/19 14:36

    maisumakun様

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

    キャンセル

  • 2019/04/19 15:21 編集

    turbolinksをページ単位で切る(https://qiita.com/Cheekyfunkymonkey/items/216bf7426493e6213927)ことにしたのですが、やはりそれでも、turbolinksに関するエラーが出て、jqueryも動かないままです。

    キャンセル

-2

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/04/19 14:31

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

    キャンセル

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

  • ただいまの回答率 88.79%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る