JQuery 事件不在生产中的 heroku 上工作，而是在开发中工作

Question

这似乎是一个常见问题，但我还没有找到适用于我的案例的解决方案。我在 bikes.js.coffee 中有一些 JQuery 可以在本地开发中正常工作。当我推送到 Heroku 时，bikes.js.coffee 中的脚本不会运行。浏览器的 javascript 控制台中没有错误。我正在使用 Rails 4.0。通过阅读，我相信资产的编译方式存在一些错误，但我无法超越。所有图像在生产中都显示良好。

bikes.js.coffee：

ready = ->
  jQuery ($) ->

  # when the #make field changes
  $("#bike_make_id").change ->

    # make a POST call and replace the content
    make = $("select#bike_make_id :selected").val()
    make = "0"  if make is ""
    jQuery.get "/bikes/update_model_select/" + make, (data) ->
      $("#bikeModels").html data

    false

$(document).ready(ready)
$(document).on('page:load', ready)

应用程序.js

//= require jquery
//= require jquery_ujs
//= require jquery.turbolinks
//= require bootstrap/bootstrap
//= require turbolinks
//= require_tree .

宝石文件

source 'https://rubygems.org'
ruby '1.9.3'
#ruby-gemset=reride_app

gem 'rails', '4.0.0'
gem 'bcrypt-ruby', '3.0.1'
gem 'faker', '1.1.2'
gem 'will_paginate', '3.0.4'
gem 'bootstrap-will_paginate', '0.0.9'
gem "mechanize", "~> 2.7.2"
gem 'pg', '0.15.1'
gem "simple_form", "~> 3.0.0.rc"
gem 'jquery-turbolinks'
gem "paperclip", :git => "git://github.com/thoughtbot/paperclip.git"
gem 'aws-sdk', '~> 1.5.7'

group :development, :test do
  gem 'rspec-rails', '2.13.1'
  # The following optional lines are part of the advanced setup.
  gem 'guard-rspec', '2.5.0'
  gem 'spork-rails', github: 'sporkrb/spork-rails'
  gem 'guard-spork', '1.5.0'
  gem 'childprocess', '0.3.6'
  gem 'railroady', '1.1.1'
end

group :test do
  gem "shoulda-matchers", github: "thoughtbot/shoulda-matchers" , branch: 'dp-rails-four' #To test model relationships simply
  gem 'selenium-webdriver', '2.0.0'
  gem 'capybara', '2.1.0'
  gem 'factory_girl_rails', '4.2.0'
  gem 'cucumber-rails', '1.3.0', :require => false
  gem 'database_cleaner', github: 'bmabey/database_cleaner'

  # Uncomment this line on OS X.
  gem 'growl', '1.0.3'

  # Uncomment these lines on Linux.
  # gem 'libnotify', '0.8.0'

  # Uncomment these lines on Windows.
  # gem 'rb-notifu', '0.0.4'
  # gem 'win32console', '1.3.2'
end

gem 'sass-rails', '4.0.0'
gem 'uglifier', '2.1.1'
gem 'coffee-rails', '4.0.0'
gem 'jquery-rails', '2.2.1'
gem 'turbolinks', '1.1.1'
gem 'jbuilder', '1.0.2'

group :doc do
  gem 'sdoc', '0.3.20', require: false
end

group :production do
  gem 'rails_12factor', '0.0.2'
end

开发.rb

RerideApp::Application.configure do
  config.cache_classes = false
  config.eager_load = false
  config.consider_all_requests_local       = true
  config.action_controller.perform_caching = false
  config.action_mailer.raise_delivery_errors = false
  config.active_support.deprecation = :log
  config.active_record.migration_error = :page_load
  config.assets.debug = true

  Paperclip.options[:command_path] = "/usr/local/bin/"
end

生产.rb

config.cache_classes = true
  config.eager_load = true
  config.consider_all_requests_local       = false
  config.action_controller.perform_caching = true
  config.serve_static_assets = true
  config.assets.js_compressor = :uglifier
  config.assets.compile = false
  config.assets.digest = true
  config.assets.version = '1.0'
  config.log_level = :info
  config.i18n.fallbacks = true
  config.active_support.deprecation = :notify
  config.log_formatter = ::Logger::Formatter.new

当我运行我的本地服务器并“查看源代码”时，我得到的是：

<script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery.turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/affix.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/alert.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/button.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/carousel.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/collapse.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/dropdown.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/modal.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/popover.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/scrollspy.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/tab.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/tooltip.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/transition.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bootstrap/bootstrap.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/analytics.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bike_shops.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/bikes.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/contacts.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/customers.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/inspections.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/make.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/model.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/quotes.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/resellers.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/static_pages.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/transactions.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/users.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/year.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>

Answer 1

你应该在 production.rb 中设置 config.assets.compile = true

Answer 2

这很可能是路径问题。在您的 jquery 中，您指的是' jQuery.get "/bikes/update_model_select/" + make, (data) -> $("#bikeModels").html data', 也许这没有在您的服务器上获得正确的路径。看看是否可以将 get 的结果输出到控制台以确认它正在工作。你永远不知道，它可能就像添加一个句号一样简单，即' jQuery.get "./bikes/update_model_select/" + make, (data) -> $("#bikeModels").html 数据'

Answer 3

在开发者工具中检查您的网络标签。您是否看到失败的资源？

无论如何，您可能希望在您的 production.rb 中设置 config.serve_static_assets = true。 Heruko 可能不会为您服务。

Answer 4

我注意到在 javascript 控制台中有一个未捕获的异常“Popover 需要 tooltip.js”。这两个 js 文件是引导框架的一部分，并且以错误的顺序编译。我删除了

//= require bootstrap/bootstrap

因为我目前没有使用任何引导 js 库。删除后，bikes.js 中的 javascript 将按预期工作。

Answer 5

你必须运行 rake 任务

rake 资产：预编译

然后转到您的 production.rb 文件并设置

config.serve_static_assets = true

这应该可以解决问题。

Answer 6

这是我的假设。我曾经在 Salesforce 平台上使用过 Heroku，我也遇到过同样的问题。因为salesforce 已经在内部使用$ 对象，所以没有一个jQuery 代码起作用。使用 jQuery 的noConflict() 解决了我的问题。希望这至少有助于提供解决此问题的想法。

 var j$ = jQuery.noConflict();

 or

 (function(j$){

 })(jQuery);