Rails 4 jQuery，JavaScript和Coffee脚本不起作用
[英]Rails 4 jQuery, javascript and coffee scripts not working
问题描述
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. 
我是Rails和Web开发的新手，尽管我在控制系统和固件方面拥有近二十年的C / C ++经验，并且拥有大量的Shell和Perl脚本。
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. 即使没有将jquery包含在application.js清单中，我也无法使其正常工作，并且我也无法使任何单独的coffeescript完全起作用。
Ubuntu 14.04LTS, ruby 2.2.1p85, rails 4.2.0 Ubuntu 14.04LTS，ruby 2.2.1p85，rails 4.2.0
application.js application.js
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require_tree .
application.html.erb application.html.erb
<%= render "layouts/header" %>
<%= render "layouts/sidenav" %>
<%= yield %>
<%= render "layouts/footer" %>
_header.html.erb _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 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. 在27个构建的控制器中，我有11个控制器和视图，它们都工作良好，除了直到昨天我还没有尝试任何JavaScript。 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. 检查并查看jQuery是否正常运行。 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. 如果在csrf_meta_tag之前添加<%= javascript_include_tag 'jquery.js' %> ，我会收到警报消息，但是coffeescript和其他脚本仍然无法使用。 Without the explicit jquery include, I get nothing. 没有显式的jQuery include，我什么也得不到。
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. 在我看来，未读取application.js中的清单和/或不包括列出的模块，只是当在页面之间移动时，turbolink在浏览器的网络面板上似乎可以正常工作。 I removed turbolink and it behaves very differently. 我删除了turbolink，但其行为却大不相同。
I also tried including the jquery-turbolinks gem, although even though I'm pretty sure it's not needed with the jquery-rails gem. 我也尝试过包括jquery-turbolinks gem，尽管我非常确定jquery-rails gem不需要它。 But it doesn't work with turbolinks uninstalled, either, so I don't think that is the conflict. 但这也不适用于已卸载的turbolinks，因此我不认为这是冲突。
Thanks for looking. 感谢您的光临。
4 个解决方案
解决方案1
3 已采纳 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. 为了解决此问题，我创建了一个空白应用程序，其中只有一个“欢迎”控制器，仅包含jQuery测试脚本，效果很好。
Working backwards from the differences in the trees from the naked application, I found that another developer had generated an empty coffeescript file: 从裸应用程序中树的差异向后看，我发现另一个开发人员生成了一个空的coffeescript文件：
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. 现在，库存的javascript_include_tag会读取清单，并包含各种javascript模块，包括jQuery，jQuery-ujs和turbolinks。
解决方案2
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. Rails 4会自动将sass-rails，coffee-rails和uglifier宝石添加到您的Gemfile中，Sprockets将其用于资产压缩。 So there is no need to add the gem explicitly. 因此，无需显式添加gem。
You do not need to add jquery with javascript_include_tag, include your application file instead and let the asset pipeline do its thing. 您不需要添加带有javascript_include_tag的jquery，而是包含您的应用程序文件，并让资产管道完成其任务。 Something like: <%= javascript_include_tag "application" %> 类似于：<％= javascript_include_tag“应用程序”％>
解决方案3
0 2015-05-21 21:01:36
Try adding to config/application.rb 尝试添加到config / application.rb
config.assets.enabled = true
You may also want: 您可能还需要：
config.assets.initialize_on_precompile = true
解决方案4
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 然后jQuery在您的应用程序上工作
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.