javascript - Uncaught ReferenceError: $ is not defined in Rails 5.2 - Stack Overflow

admin管理员组

文章数量:1431749

I'm building a rails application where I want to redirect the user to a #show action when they click on a index table's row.

For this I'm trying to use Jquery in my coffeescript file. Here's the relevant code

index.html.erb:

<% @campaign.each do |campaign| %>
    <tr data-link="<%= campaign_path(campaign) %>">
        <td><%= campaign.campaign_name %></td>
        <td><%= campaign.start_date %></td>
        <td><%= campaign.created_at %></td>
        <td><%= link_to "delete", campaign, class:"btn btn-default btn-xs", method: :delete, data: { confirm: "You sure?" } %></td>
     </tr>
<% end %>

campaigns.coffee:

$ ->
  $("tr[data-link]").click ->
    window.location.replace($(this).data("link"));

But once I run this I keep on seeing this error in the browser console:

Uncaught ReferenceError: $ is not defined

I have installed jquery-rails gem. Included it in my application.js file as well. When my application is rendered, I am seeing the Jquery script tag in the header also

<script src="/assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1"></script>

But still I'm seeing this error in the console

Uncaught ReferenceError: $ is not defined
at campaigns.self-4617c47e06384e281aa2550caae08f3b4986441d2bfff9b6e3519f0a1e82f3d7.js?body=1:2
at campaigns.self-4617c47e06384e281aa2550caae08f3b4986441d2bfff9b6e3519f0a1e82f3d7.js?body=1:8
(anonymous) @ campaigns.self-4617c47e06384e281aa2550caae08f3b4986441d2bfff9b6e3519f0a1e82f3d7.js?body=1:2
(anonymous) @ campaigns.self-4617c47e06384e281aa2550caae08f3b4986441d2bfff9b6e3519f0a1e82f3d7.js?body=1:8

Am I missing anything? Thanks for helping out.

I'm building a rails application where I want to redirect the user to a #show action when they click on a index table's row.

For this I'm trying to use Jquery in my coffeescript file. Here's the relevant code

index.html.erb:

<% @campaign.each do |campaign| %>
    <tr data-link="<%= campaign_path(campaign) %>">
        <td><%= campaign.campaign_name %></td>
        <td><%= campaign.start_date %></td>
        <td><%= campaign.created_at %></td>
        <td><%= link_to "delete", campaign, class:"btn btn-default btn-xs", method: :delete, data: { confirm: "You sure?" } %></td>
     </tr>
<% end %>

campaigns.coffee:

$ ->
  $("tr[data-link]").click ->
    window.location.replace($(this).data("link"));

But once I run this I keep on seeing this error in the browser console:

Uncaught ReferenceError: $ is not defined

I have installed jquery-rails gem. Included it in my application.js file as well. When my application is rendered, I am seeing the Jquery script tag in the header also

<script src="/assets/jquery.self-bd7ddd393353a8d2480a622e80342adf488fb6006d667e8b42e4c0073393abee.js?body=1"></script>

But still I'm seeing this error in the console

Uncaught ReferenceError: $ is not defined
at campaigns.self-4617c47e06384e281aa2550caae08f3b4986441d2bfff9b6e3519f0a1e82f3d7.js?body=1:2
at campaigns.self-4617c47e06384e281aa2550caae08f3b4986441d2bfff9b6e3519f0a1e82f3d7.js?body=1:8
(anonymous) @ campaigns.self-4617c47e06384e281aa2550caae08f3b4986441d2bfff9b6e3519f0a1e82f3d7.js?body=1:2
(anonymous) @ campaigns.self-4617c47e06384e281aa2550caae08f3b4986441d2bfff9b6e3519f0a1e82f3d7.js?body=1:8

Am I missing anything? Thanks for helping out.

• javascript
• jquery
• ruby-on-rails
• coffeescript
• ruby-on-rails-5.2

Share Improve this question Follow edited May 17, 2018 at 14:20 AntonTkachov 1,78411 gold badge1010 silver badges3030 bronze badges asked May 17, 2018 at 13:25 trurohittrurohit 45111 gold badge1010 silver badges2121 bronze badges 9

• 1 Are you sure the jQuery is loaded before your script? What if you write jQuery instead of $? – user9539019 Commented May 17, 2018 at 13:32
• 2 You might need to add $(document).on "turbolinks:load", -> first. – Pat Mellon Commented May 17, 2018 at 13:36
• @LyoshaKorogoda I tried adding jQuery instead of $ - it's showing the same error - Uncaught ReferenceError: jQuery is not defined – trurohit Commented May 17, 2018 at 13:51
• @PatMellon not sure if I'm doing this right. Is this the syntax you're suggesting? $(document).on "turbolinks:load", -> $("tr[data-link]").click -> window.location.replace($(this).data("link")); It's still showing the same error though – trurohit Commented May 17, 2018 at 13:54
• Something like $(document).on "turbolinks:load", -> $("tr[data-link]").click -> window.location.replace($(this).data("link")); return return return – Pat Mellon Commented May 17, 2018 at 14:00

 |  Show 4 more ments

2 Answers 2

Sorted by: Reset to default 2

I think I have encountered the same issue, and I realised I must have misunderstood the official guide:

which I thought in Rails 5.2 (after Rails 5.1), because we have the built-in rails-ujs, we don't need jquery/jquery_ujs anymore.

But I was wrong.

I learned my mistake thru this article. After I found the "Uncaught ReferenceError: $ is not defined" issue, all I doubted was "no jquery installed". And after checked many posts, I tried to install jquery-rails to test.

Finally it works.

Yes, we need jquery-rails even in Rails 5.2.

After installing jquery-rails then follow the order of application.js

//= require jquery
//= require jquery_ujs 
.....

See the Installation

Solution From Comment

I've figured what the problem might be. In my application.js, whenever I add require jquery - it's breaking my entire application and redirecting all pages to localhost:3000/undefined

//= require rails-ujs 
//= require jquery 
//= require activestorage 
//= require turbolinks 
//= require_tree . 

If I remove require jquery then it will start working fine again.

本文标签： javascriptUncaught ReferenceErroris not defined in Rails 52Stack Overflow