JQuery events are not working on heroku in product

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