JQuery events are not working on heroku in production but work in development

问题:

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); 

文章来源: JQuery events are not working on heroku in production but work in development