JQuery 事件不是在生产中处理 heroku,而是在开发中工作

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

本文关键字:开发 工作 处理 事件 生产中 JQuery heroku      更新时间:2023-09-26

似乎是一个常见问题,但我还没有找到适用于我的情况的解决方案。 我在自行车.js.coffee中有一些JQuery,可以在本地开发中正常工作。 当我推送到Heroku时,自行车中的脚本.js.coffee无法运行。 浏览器的 javascript 控制台中没有错误。我正在使用 Rails 4.0。 通过阅读,我相信这是资产编译方式上的一些错误,但我无法超越这一点。 所有图像在生产中都显示良好。

自行车.js咖啡:

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)

应用.js

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

宝石文件

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

开发.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

生产.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>

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

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

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

无论如何,您可能希望在生产.rb中config.serve_static_assets = true。赫鲁科可能不会为你服务。

我注意到在javascript控制台中有一个未捕获的异常"Popover需要工具提示.js"。 这两个js文件是引导框架的一部分,并且以错误的顺序编译。 我删除了

//= require bootstrap/bootstrap

因为我目前没有使用任何引导 js 库。 删除后,自行车中的 javascript .js按预期工作。

你必须运行 rake 任务

Rake 资源:预编译

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

config.serve_static_assets = 真

这应该可以解决问题。

这是我

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

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