39
43

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2017-09-19

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>

試して見てくださいね。

39
43
3

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
39
43

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?