JQuery事件在生产中不适用于heroku,但在开发中工作

这似乎是一个常见的问题,但我没有找到适用于我的案例的解决方案。 我在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) 

的application.js

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

的Gemfile

 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 

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

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

当我运行我的本地服务器和“查看源代码”时,我得到的是:

                                 

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

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

检查开发者工具中的网络选项卡。 你看到失败的资源吗?

任何原因,您可能希望在production.rb中使用config.serve_static_assets = true。 Heruko可能不会为你服务。

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

//= require bootstrap/bootstrap

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

你必须运行rake任务

rake资产:预编译

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

config.serve_static_assets = true

应该解决这个问题。

这是我的假设。 我在Salesforce平台上使用过一次Heroku,我遇到了同样的问题。 因为salesforce已经在内部使用$ object,所以jQuery代码都没有工作。 使用jQuery的noConflict()解决了我的问题。 希望这有助于至少提出解决这个问题的想法。

  var j$ = jQuery.noConflict(); or (function(j$){ })(jQuery);