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

时间：2013-11-13 06:07:26

标签： javascript jquery ruby-on-rails heroku coffeescript

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

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

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

6 个答案:

答案 0 :(得分：0)

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

答案 1 :(得分：0)

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

答案 2 :(得分：0)

检查开发人员工具中的“网络”标签。你看到失败的资源吗？

为什么，您可能希望在production.rb中使用config.serve_static_assets = true。 Heruko可能不会为你服务。

答案 3 :(得分：0)

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

//= require bootstrap/bootstrap

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

答案 4 :(得分：0)

你必须运行rake任务

  

rake assets：precompile

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

  

config.serve_static_assets = true

应该解决问题。

答案 5 :(得分：-1)

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

 var j$ = jQuery.noConflict();

 or

 (function(j$){

 })(jQuery);
相关问题
最新问题