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
1
  • Please check view source of page and make sure jquery.min.js is added at the top
    – softsdev
    Commented Jun 3, 2015 at 19:57

7 Answers 7

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.)

1
  • this did not work for me but environment.plugins.append... did (not prepend)
    – smoore4
    Commented Jun 1, 2022 at 22:07
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'
1
  • 1
    Does it still go there in rails 6? (I don't have an app/assets/javascripts directory- should I create one?
    – stevec
    Commented Sep 26, 2020 at 12:33
6

Replace application.html.erb

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

to

<%= javascript_include_tag "application" %>
1
  • 5
    I do not understand if turbolinks is so problematic, why nobody either takes care of it or gets rid of it? Commented Aug 28, 2017 at 1:28
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 %>
1
  • strange but this is what worked for me. Commented Oct 13, 2021 at 9:40
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" %>
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();
});
1
  • 2
    When I tried this method I then got an error stating that jQuery is not defined
    – Gcap
    Commented Nov 4, 2016 at 18:45
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
    })
  });
};
2
  • 1
    It works for me! Thanks. window.onload in native JS code, so, it should work in any browser.
    – mahfuz
    Commented Dec 28, 2021 at 21:00
  • 1
    THIS IS THE BEST ADVICE ON THE INTERNET. Thank you.
    – Liz
    Commented Jul 27, 2023 at 16:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.