railsでjQuery/JavaScriptがうまく動かない時の対処法 #Ruby

html内でapplication.jsが呼ばれるように設定しているのに、なかなか動かずハマったので解決策をご紹介します。結論だけ書くと、”assets/javascriptより先にjQueryのソースを読む”です。

jQueryを読み込ませる→スクリプトを読み込む

問題のHTMLがこちら

application.html.erb

<head>
    <title>SiteTitle</title>
    <%= csrf_meta_tags %>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application' %>

  </head>

Stack Overflowには、"turbolinksが悪さをしている"、"jQueryを読み込む"という解決策が乗っていましたので、試して見ましたが、なかなかうまくいかず。

application.html.erb

<head>
    <title>SiteTitle</title>
    <%= csrf_meta_tags %>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application' %>

<!-- /この部分を追加しました -->
　　<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- /ここまで -->
  </head>

しかし、このやり方だとスクリプト読み込み→jQuery読み込みという順番になります。この順番を逆にするだけでうまくいきました。

application.html.erb

<head>
    <title>SiteTitle</title>
    <%= csrf_meta_tags %>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>

<!-- /jQueryを読み込む -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<!-- /スクリプトを読み込む -->
    <%= javascript_include_tag 'application' %>



  </head>

試して見てくださいね。