Login/Register
Uncaught ReferenceError: $ is not defined rails
Asked Answered
jqueryruby-on-railsfroala
P

7

16

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
Preconception answered 29/3, 2015 at 8:13 Comment(1)
Please check view source of page and make sure jquery.min.js is added at the top – Writein
Q
11

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]

  1. Add jQuery to environment. $ yarn add jquery

  2. 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'
 })
 )

  3. Require jquery in application.js file. (/app/javascript/packs/application.js) require('jquery')

  4. (Restart rails server to make sure everything gets loaded.)

Qualify answered 27/10, 2020 at 22:51 Comment(1)
this did not work for me but environment.plugins.append... did (not prepend) – On
H
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'
Hartzog answered 21/8, 2018 at 17:56 Comment(1)
Does it still go there in rails 6? (I don't have an app/assets/javascripts directory- should I create one? – Folk
H
6

Replace application.html.erb

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

to

<%= javascript_include_tag "application" %>
Heisler answered 2/8, 2015 at 17:34 Comment(1)
I do not understand if turbolinks is so problematic, why nobody either takes care of it or gets rid of it? – Restrainer
E
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 %>
Emulsoid answered 15/3, 2017 at 17:42 Comment(1)
strange but this is what worked for me. – Tea
C
2

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" %>
Crary answered 11/6, 2015 at 13:34 Comment(0)
L
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();
});
Lugsail answered 22/1, 2016 at 12:37 Comment(1)
When I tried this method I then got an error stating that jQuery is not defined – Quinine
K
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
    })
  });
};
Krems answered 28/12, 2020 at 7:47 Comment(2)
It works for me! Thanks. window.onload in native JS code, so, it should work in any browser. – Spencerianism
THIS IS THE BEST ADVICE ON THE INTERNET. Thank you. – Balustrade

© 2022 - 2024 — McMap. All rights reserved.