Rails 4 jQuery、javascript 和咖啡脚本不起作用答案

【问题标题】：Rails 4 jQuery, javascript and coffee scripts not workingRails 4 jQuery、javascript 和咖啡脚本不起作用
【发布时间】：2015-08-03 16:35:22
【问题描述】：

我是 Rails 和 Web 开发的新手，尽管我在控制系统和固件方面拥有近 20 年的 C/C++ 经验，并且使用过很多 shell 和 perl 脚本。

如果不明确包含它，我无法让 jquery 工作，即使它在 application.js 清单中，而且我根本无法让任何单独的咖啡脚本工作。

Ubuntu 14.04LTS，ruby 2.2.1p85，rails 4.2.0

应用程序.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>
...

宝石文件

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

我已经构建了 27 个控制器和视图中的 11 个，它们都运行良好，只是我直到昨天才尝试过任何 javascript。我没有得到任何预期的行为，所以在我的“人员”索引视图中我添加了：

...
<script>
$(document).ready(function(){
    alert("jQuery is running!");
});
</script>
...

检查 jQuery 是否正常工作。如果我在 csrf_meta_tag 之前添加<%= javascript_include_tag 'jquery.js' %>，我会收到警报消息，但coffeescript 和其余的仍然不起作用。如果没有明确的 jquery 包含，我什么也得不到。

我看过很多很多关于此的帖子，但没有一个有效。在我看来，application.js 中的清单没有被读取和/或列出的模块不包括在内，除了在从一个页面移动到另一个页面时，turbolink 似乎可以通过浏览器上的网络面板正常工作。我删除了 turbolink，它的行为非常不同。

我也尝试包含 jquery-turbolinks gem，尽管我很确定 jquery-rails gem 不需要它。但它也不适用于卸载 turbolinks，所以我认为这不是冲突。

感谢收看。

【问题讨论】：

你能发布你的 config/application.rb 文件，当然删除任何敏感项目吗？听起来资产管道有问题或被禁用。
有现货。添加到上面。

标签： javascript jquery ruby-on-rails ruby coffeescript

【解决方案1】：

为了解决这个问题，我创建了一个只有一个“欢迎”控制器的空白应用程序，其中只包含 jQuery 测试脚本，它运行良好。

从裸应用程序树的差异向后工作，我发现另一个开发人员生成了一个空的咖啡脚本文件：

app/assets/javascript/application.coffee

我删除了这个文件并且应用程序可以正常工作。 stock javascript_include_tag 现在读取清单并包含各种 javascript 模块，包括 jQuery、jQuery-ujs 和 turbolinks。

【讨论】：

你自己的！哈，很高兴你能解决这个问题。干杯。

【解决方案2】：

Rails 4 自动将 sass-rails、coffee-rails 和 uglifier gem 添加到您的 Gemfile 中，Sprockets 使用这些 gem 进行资产压缩。所以不需要显式添加gem。

您不需要使用 javascript_include_tag 添加 jquery，而是包含您的应用程序文件并让资产管道完成它的工作。类似于：

【讨论】：

rails new boe 自动包含这些宝石。 <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> 同时包含在 application.html.rb 中。我已将其移至 _header.html.rb。我试图用<%= javascript_include_tag "application" %> 和<%= javascript_include_tag :defaults %> 替换它，但没有明显的效果。

【解决方案3】：

尝试添加到 config/application.rb

config.assets.enabled = true

您可能还想要：

config.assets.initialize_on_precompile = true

【讨论】：

是的。虽然它就像我一样忘记了。 ;)
我也是，因此建议:) 如果不是这样，那么我一无所知。我会尝试去掉一些额外的东西——真的，你需要开始的只是 jQuery，没有 turbolinks 或类似的东西。只需= stylesheet_link_tag "application", :media => "all" 和= javascript_include_tag "application"。此外，查看源代码并准确查看生成的 application.js 包含的内容（如果有的话）；这也可以提供有用的提示。

【解决方案4】：

在本地启动您的应用程序。在任何浏览器中打开您的应用程序。打开页面的源代码。检查以下行是否存在

 <script src="/assets/jquery.js?body=1" data-turbolinks-track="true">

如果你能看到如下内容

/*!
* jQuery JavaScript Library v1.11.1
* http://jquery.com/
*
* Includes Sizzle.js
* http://sizzlejs.com/ 
..........
..........
soon ....

然后 jQuery 在您的应用程序上运行

【讨论】：