jquery - Rails : jQuery-Ui does work on 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 asset: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
 */

gem 文件

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测试您的生产环境，看看您在本地生产环境是否遇到同样的问题。

解决方案可能是执行RAILS_ENV=生产捆绑执行rake Assets :预编译，然后重新测试rails s -e生产

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

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

1. 转到您的 Heroku 页面，例如 https://surfcheck.herokuapp.com
2. 使用 f12 打开 Chrome 开发者工具
3. 选择来源选项卡
4. 选择application-fingerprinted.js 文件
5. 使用 {} 漂亮地打印文件
6. 搜索 jquery-ui 函数 .draggable 或任何其他函数

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

还要补充一点，您在开发中不会收到错误，因为这是预编译问题。您的服务器正在回退到 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