Rails 4 jQuery，JavaScript和Coffee腳本不起作用

Question

我是Rails和Web開發的新手，盡管我在控制系統和固件方面擁有近二十年的C / C ++經驗，並且擁有大量的Shell和Perl腳本。

即使沒有將jquery包含在application.js清單中，我也無法使其正常工作，並且我也無法使任何單獨的coffeescript完全起作用。

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

寶石文件

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 include，我什么也得不到。

我看過很多關於此的文章，但都沒有奏效。 在我看來，未讀取application.js中的清單和/或不包括列出的模塊，只是當在頁面之間移動時，turbolink在瀏覽器的網絡面板上似乎可以正常工作。 我刪除了turbolink，但其行為卻大不相同。

我也嘗試過包括jquery-turbolinks gem，盡管我非常確定jquery-rails gem不需要它。 但這也不適用於已卸載的turbolinks，因此我不認為這是沖突。

感謝您的光臨。

Answer 1

為了解決此問題，我創建了一個空白應用程序，其中只有一個“歡迎”控制器，僅包含jQuery測試腳本，效果很好。

從裸應用程序中樹的差異向后看，我發現另一個開發人員生成了一個空的coffeescript文件：

app/assets/javascript/application.coffee

我刪除了此文件，應用程序正常運行。 現在，庫存的javascript_include_tag會讀取清單，並包含各種javascript模塊，包括jQuery，jQuery-ujs和turbolinks。

Answer 2

Rails 4會自動將sass-rails，coffee-rails和uglifier寶石添加到您的Gemfile中，Sprockets將其用於資產壓縮。 因此，無需顯式添加gem。

您不需要添加帶有javascript_include_tag的jquery，而是包含您的應用程序文件，並讓資產管道完成其任務。 類似於：<％= javascript_include_tag“應用程序”％>

Answer 3

嘗試添加到config / application.rb

config.assets.enabled = true

您可能還需要：

config.assets.initialize_on_precompile = true

Answer 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在您的應用程序上工作

Rails 4 jQuery，JavaScript和Coffee腳本不起作用

問題描述

4 個解決方案

解決方案1
3 已采納 2015-05-22 15:04:42

解決方案2
0 2015-05-21 20:56:29

解決方案3
0 2015-05-21 21:01:36

解決方案4
0 2015-05-22 10:17:36

Rails 4 jQuery，JavaScript和Coffee腳本不起作用

問題描述

4 個解決方案

解決方案1 3 已采納 2015-05-22 15:04:42

解決方案2 0 2015-05-21 20:56:29

解決方案3 0 2015-05-21 21:01:36

解決方案4 0 2015-05-22 10:17:36

解決方案1
3 已采納 2015-05-22 15:04:42

解決方案2
0 2015-05-21 20:56:29

解決方案3
0 2015-05-21 21:01:36

解決方案4
0 2015-05-22 10:17:36