Uncaught ReferenceError: $ is not defined rails

Question

I'm trying to add Froala editor to my project.

Problem only on production server(on localhost it works fine) I'm using rails 4.1.0 In gemfile i'm have

gem 'jquery-rails'

In my assets/javascripts/application.js:

//= require jquery
//= require jquery_ujs
//= require foundation
//= require turbolinks
//= require_tree .
//= require modernizr
//= require froala_editor.min.js

In new.html.erb file:

<div class="row">
  <%= form_for :article do |f| %>
    <p>
        Title<br>
        <%= f.text_field :title %>
    </p>
    <p>
        Content<br>
    <%= f.text_area :text, :id=>'content' %>
    <p>
    <%= f.submit %>
    </p>
  <% end %>
</div>
<script>
  $(function() {
    $('div#content').editable({
      inlineMode: false
    })
  });
</script>

In application.html.erb:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
    <title><%= content_for?(:title) ? yield(:title) : "foundation-rails" %></title>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
    <%= javascript_include_tag "vendor/modernizr" %>
    <%= javascript_include_tag "application" 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
  </head>
  <body>
    <%= yield %>
  </body>
</html>

In this case result is:

Uncaught ReferenceError: $ is not defined

If i'm adding a string:

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>

result is:

Uncaught TypeError: undefined is not a function

Please check view source of page and make sure jquery.min.js is added at the top — softsdev, Jun 03 '15 at 19:57

Mark Wicker · Answer 1 · 2020-10-27T23:49:01.430

The following is what I needed to do for Rails 6 (6.0.3.4 to be exact.) [found at (all credit goes to): https://www.botreetechnologies.com/blog/introducing-jquery-in-rails-6-using-webpacker]

Add jQuery to environment. $ yarn add jquery

Add below code in environment.js (<app_path>/config/webpack/environment.js)

 const webpack = require('webpack')
 environment.plugins.prepend('Provide',
 new webpack.ProvidePlugin({
     $: 'jquery/src/jquery',
     jQuery: 'jquery/src/jquery'
 })
 )

Require jquery in application.js file. (/app/javascript/packs/application.js) require('jquery')
(Restart rails server to make sure everything gets loaded.)

this did not work for me but `environment.plugins.append...` did (not prepend) — smoore4, Jun 01 '22 at 22:07

score 10 · Answer 2 · answered Aug 21 '18 at 17:56

10

This was my solution:

Put this in your app/assets/javascripts/application.js

//= require jquery
//= require jquery_ujs

and install this gem file:

gem 'jquery-rails'

answered Aug 21 '18 at 17:56

jasmineq

521
5
7

1

Does it still go there in rails 6? (I don't have an app/assets/javascripts directory- should I create one? – stevec Sep 26 '20 at 12:33

score 6 · Answer 3 · edited Aug 02 '15 at 17:46

6

Replace application.html.erb

<%= javascript_include_tag "application" 'data-turbolinks-track' => true %>

to

<%= javascript_include_tag "application" %>

edited Aug 02 '15 at 17:46

Vucko

20,555
10
56
107

answered Aug 02 '15 at 17:34

Vedprakash Singh

522
8
22

5

I do not understand if turbolinks is so problematic, why nobody either takes care of it or gets rid of it? – Kick Buttowski Aug 28 '17 at 01:28

score 3 · Answer 4 · answered Mar 15 '17 at 17:42

3

An solution working for me is:

Separate files

create assets/javascripts/jquery_init.js content :

//= require jquery
//= require jquery.turbolinks
//= require jquery.cookie
//= require jquery.ui.all
//= require jquery_ujs

an call before aplication.js

<%= javascript_include_tag "jquery_init" %>
<%= javascript_include_tag "application", :async => !Rails.env.development?, "turbolinks-data-track" => true %>

answered Mar 15 '17 at 17:42

scampetel

31
2

strange but this is what worked for me. – Mayuresh Srivastava Oct 13 '21 at 09:40

score 2 · Answer 5 · answered Jun 11 '15 at 13:34

try switching these lines:

<%= javascript_include_tag "vendor/modernizr" %>
<%= javascript_include_tag "application" 'data-turbolinks-track' => true %>

will become

<%= javascript_include_tag "application" 'data-turbolinks-track' => true %>
<%= javascript_include_tag "vendor/modernizr" %>

score 2 · Answer 6 · edited Jan 22 '16 at 14:07

2

How do you have the foundation added to the project?

In app/assets/javascripts/aplication.js

I had the same error

$ is no defined

and I resolved by reloading the foundation js this way:

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

edited Jan 22 '16 at 14:07

Richard Erickson

2,568
8
26
39

answered Jan 22 '16 at 12:37

Riru Isla

105
7

2

When I tried this method I then got an error stating that jQuery is not defined – Gcap Nov 04 '16 at 18:45

score 2 · Answer 7 · answered Dec 28 '20 at 07:47

2

Here's what I did, it worked for me:

Surround your script with window.onload = function () { }; so your js will be executed only when the page load:

window.onload = function () {
  $(function() {
    $('div#content').editable({
      inlineMode: false
    })
  });
};

answered Dec 28 '20 at 07:47

Georges Atalla

41
6

1

It works for me! Thanks. `window.onload` in native JS code, so, it should work in any browser. – mahfuz Dec 28 '21 at 21:00
THIS IS THE BEST ADVICE ON THE INTERNET. Thank you. – Liz Jul 27 '23 at 16:38

Uncaught ReferenceError: $ is not defined rails

7 Answers7

Linked

Related