Rails 4 jQuery, javascript and coffee scripts not working
Question
I am new to rails and web development, although I have almost two decades of C/C++ in control systems and firmware, and quite a lot of shell and perl scripting.
I can't get jquery to work without explicitly including it, even though it is in the application.js manifest, and I can't get any of the individual coffeescripts to work at all.
Ubuntu 14.04LTS, ruby 2.2.1p85, rails 4.2.0
application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
application.html.erb
<%= render "layouts/header" %>
<%= render "layouts/sidenav" %>
<%= yield %>
<%= render "layouts/footer" %>
_header.html.erb
<html>
<head>
<title>My Application Title</title>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
<%= stylesheet_link_tag 'intranet' %>
<%= stylesheet_link_tag 'form' %>
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
<%= csrf_meta_tags %>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="shortcut icon" href="favicon.ico" />
</head>
<body>
...
Gemfile
source 'https://rubygems.org'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '4.2.0'
# Use sqlite3 as the database for Active Record
#gem 'sqlite3'
# Use postgresql as the database for Active Record
gem 'pg'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.1.0'
# See https://github.com/sstephenson/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby
# Use jquery as the JavaScript library
gem 'jquery-rails'
# Turbolinks makes following links in your web application faster. Read more: https://github.com/rails/turbolinks
gem 'turbolinks'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.0'
# bundle exec rake doc:rails generates the API under doc/api.
gem 'sdoc', '~> 0.4.0', group: :doc
# Pagination gem
gem 'kaminari'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'
# Use Unicorn as the app server
# gem 'unicorn'
# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development
group :development, :test do
# Call 'byebug' anywhere in the code to stop execution and get a debugger console
gem 'byebug'
# Access an IRB console on exception pages or by using <%= console %> in views
gem 'web-console', '~> 2.0'
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring'
end
config/application.rb
require File.expand_path('../boot', __FILE__)
require 'rails/all'
# Require the gems listed in Gemfile, including any gems
# you've limited to :test, :development, or :production.
Bundler.require(*Rails.groups)
module Boe
class Application < Rails::Application
# Settings in config/environments/* take precedence over those specified here.
# Application configuration should go into files in config/initializers
# -- all .rb files in that directory are automatically loaded.
# Set Time.zone default to the specified zone and make Active Record auto-convert to this zone.
# Run "rake -D time" for a list of tasks for finding time zone names. Default is UTC.
# config.time_zone = 'Central Time (US & Canada)'
# The default locale is :en and all translations from config/locales/*.rb,yml are auto loaded.
# config.i18n.load_path += Dir[Rails.root.join('my', 'locales', '*.{rb,yml}').to_s]
# config.i18n.default_locale = :de
# Do not swallow errors in after_commit/after_rollback callbacks.
config.active_record.raise_in_transactional_callbacks = true
end
end
I have eleven controllers and views out of 27 built, and they all work well except that I hadn't tried any javascript until yesterday. I wasn't getting any of the expected behavior, so in my "people" index view I added:
...
<script>
$(document).ready(function(){
alert("jQuery is running!");
});
</script>
...
To check and see if jQuery was working at all. If I add <%= javascript_include_tag 'jquery.js' %> before the csrf_meta_tag, I get the alert message but coffeescript and the rest still don't work. Without the explicit jquery include, I get nothing.
I've looked at many, many posts on this, but none of them have worked. It appears to me that the manifest in application.js is not being read and/or the modules listed are not included, except that turbolink appears to work properly gauging by the network panel on the browser when moving from page to page. I removed turbolink and it behaves very differently.
I also tried including the jquery-turbolinks gem, although even though I'm pretty sure it's not needed with the jquery-rails gem. But it doesn't work with turbolinks uninstalled, either, so I don't think that is the conflict.
Thanks for looking.
4 answers
solution1
3 ACCPTED 2015-05-22 15:04:42
To resolve this issue I created a blank app with just a 'welcome' controller, containing only the jQuery test script, which worked fine.
Working backwards from the differences in the trees from the naked application, I found that another developer had generated an empty coffeescript file:
app/assets/javascript/application.coffee
I removed this file and the application works properly. The stock javascript_include_tag now reads the manifest and includes the various javascript modules, including jQuery, jQuery-ujs and turbolinks.
solution2
0 2015-05-21 20:56:29
Rails 4 automatically adds the sass-rails, coffee-rails and uglifier gems to your Gemfile, which are used by Sprockets for asset compression. So there is no need to add the gem explicitly.
You do not need to add jquery with javascript_include_tag, include your application file instead and let the asset pipeline do its thing. Something like: <%= javascript_include_tag "application" %>
solution3
0 2015-05-21 21:01:36
Try adding to config/application.rb
config.assets.enabled = true
You may also want:
config.assets.initialize_on_precompile = true
solution4
0 2015-05-22 10:17:36
start your application locally. open your application in any browser. Open the source code of the page. Check if the following line exists
<script src="/assets/jquery.js?body=1" data-turbolinks-track="true">
and if you can see content as follows
/*!
* jQuery JavaScript Library v1.11.1
* http://jquery.com/
*
* Includes Sizzle.js
* http://sizzlejs.com/
..........
..........
soon ....
then jQuery works on your application
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.