问题
this seems to be a common problem but I haven't found a solution applicable for my case. I have some JQuery in bikes.js.coffee that works correctly in development locally. When I push to Heroku the script in bikes.js.coffee does not run. There is no error in the browser's javascript console. I am using Rails 4.0. From reading around I believe it is some error in the way the assets are compiled but I am unable to get beyond that. All images show up fine in production.
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
When I run my local server and 'view source' here is what I get:
<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>
回答1:
You should set config.assets.compile = true in production.rb
回答2:
It's quite possibly a path issue. In your jquery you refer to ' jQuery.get "/bikes/update_model_select/" + make, (data) -> $("#bikeModels").html data', Perhaps this is not getting the correct path on your server. See if you can output the result of the get to the console to confirm it's working. You never know, it could be as simple as adding a full stop, ie ' jQuery.get "./bikes/update_model_select/" + make, (data) -> $("#bikeModels").html data'
回答3:
Check your Network tab in Developer tools. Do you see failed resources?
Any why, you might want to config.serve_static_assets = true in your production.rb. Heruko might not serve them for you.
回答4:
I notice that in the javascript console there was an uncaught exception "Popover requires tooltip.js". These two js files are part of the bootstrap framework and were being compiled in the wrong order. I removed
//= require bootstrap/bootstrap
since I am not currently using any of the bootstrap js libraries. After removal, the javascript in bikes.js works as intended.
回答5:
your have to run the rake task
rake assets:precompile
then go to your production.rb file and set
config.serve_static_assets = true
that should take care of the problem.
回答6:
Here is my assumption. I have used Heroku once with Salesforce platform, I have faced the same problem. Because salesforce was already using $ object internally, so none of jQuery code worked. using noConflict() of jQuery solved my problem. Hope this helps at least give an idea to solve this.
var j$ = jQuery.noConflict();
or
(function(j$){
})(jQuery);
来源：https://stackoverflow.com/questions/19946575/jquery-events-are-not-working-on-heroku-in-production-but-work-in-development