Rails：jQuery-Ui 可以在 localhost 上工作，但不能在 heroku 上工作

Question

我的 rails 项目可以在 localhost 上运行，但不能在 heroku 上运行。

我正在使用 jQuery-ui gem。当推送到heroku时，会出现这样的错误：

TypeError: $(...).draggable is not a function

另一方面，jQuery 可以工作。如何让 jQuery-ui 在 Heroku 上工作？

There is a thread with the same problem, however, the proposed solutions do not work for me.

rails assets:precompile 会产生同样的错误。

application.js：

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require rails-ujs
//= require turbolinks
//= require_tree .

应用程序.css

 *= require jquery-ui
 *= require_tree .
 *= require_self
 */

宝石文件

source 'https://rubygems.org'

git_source(:github) do |repo_name|
  repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/")
  "https://github.com/#{repo_name}.git"
end
gem 'devise'

gem 'jquery-rails'
gem 'jquery-ui-rails'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 5.1.4'
# Use postgresql as the database for Active Record
gem 'pg', '~> 0.18'
# Use Puma as the app server
gem 'puma', '~> 3.7'
# Use SCSS for stylesheets
gem 'sass-rails', '~> 5.0'
# Use Uglifier as compressor for JavaScript assets
gem 'uglifier', '>= 1.3.0'
# See https://github.com/rails/execjs#readme for more supported runtimes
# gem 'therubyracer', platforms: :ruby

# Use CoffeeScript for .coffee assets and views
gem 'coffee-rails', '~> 4.2'
# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'
# Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
gem 'jbuilder', '~> 2.5'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 3.0'
# Use ActiveModel has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Capistrano for deployment
# gem 'capistrano-rails', group: :development

group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
  # Adds support for Capybara system testing and selenium driver
  gem 'capybara', '~> 2.13'
  gem 'selenium-webdriver'
end

group :development do
  # Access an IRB console on exception pages or by using <%= console %> anywhere in the code.
  gem 'web-console', '>= 3.3.0'
  gem 'listen', '>= 3.0.5', '< 3.2'
  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
  gem 'spring'
  gem 'spring-watcher-listen', '~> 2.0.0'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

在 heroku 上不起作用的代码：

<script>
    $(document).ready(function() {

        var callresultswal = function(){
            resultswal("Lückentext ausgefüllt!", "Du hast die Lücken korrekt ausgefüllt!", 500, "ethic", "utgf", "completed");
        };

        var points = 0;
        $( function() {
            $( ".draggable" ).draggable({ revert: 'invalid', snap: ".dropfield", snapTolerance: 75, snapMode: "inner" });

            $( ".dropfield" ).droppable({
                drop: function( event, ui ) {
                  if(ui.draggable.attr('id').toLowerCase() == $(this).attr('value')){
                      points = points + 1;
                      console.log(points);
                      var id = ui.draggable.attr('id');
                      $("#" + id).draggable( 'disable' );
                      $("#" + id).css( "background-color", "#7FFF00");
                      if (points == 6){
                          callresultswal();
                          $('#backforward').fadeIn("slow").removeClass("hidden-xl-down");
                      }
                  }
                }
            });
        } );
    });
</script>

Answer 1

最佳做法是删除require_tree 并按以下顺序要求每个文件

//= require jquery
//= require jquery-ujs
//= require jquery-ui
//= require yourjsfile

然后您需要使用rails s -e production 测试您的production 环境，看看您是否在本地生产环境中遇到同样的问题。

一种解决方案可能是执行RAILS_ENV=production bundle exec rake assets:precompile，然后重新测试rails s -e production

如果你解决了问题，记得将你的更改提交到 github。

如果你没有解决问题，永远记住你可以像这样检查heroku/本地生产页面

1. 去你的heroku页面查看前https://surfcheck.herokuapp.com
2. 用f12打开chrome开发者工具
3. 选择Sources 标签
4. 选择application-fingerprinted.js文件
5. 用{} 把文件很好地识别出来
6. 搜索jquery-ui函数.draggable或任何其他函数

我过去遇到过这种类型的jquery-ui 问题，一个非常简单的解决方案是前往jquery-ui 站点，下载未缩小的文件并将它们处理到我的vendor 文件夹中，删除gem 并使用这些文件对于 jquery。

还要补充一点，development 中没有出现错误，因为这是预编译问题。您的服务器正在退回到 gem 文件夹中的文件，因为它在 application.js 中找不到 jquery 文件，这可以在开发中禁用

config.assets.unknown_asset_fallback allows you to modify the behavior of the asset pipeline when an asset is not in the pipeline, if you use sprockets-rails 3.2.0 or newer. Defaults to true.

http://guides.rubyonrails.org/configuring.html

Answer 2

按照下面的顺序并从此代码中删除 //= require rails-ujs 行

//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require turbolinks
//= require_tree .

希望能帮到你