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 .

application.css

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

的Gemfile

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

然后，您需要使用production测试rails s -e 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或任何其他函数

document

过去我遇到过jquery-ui这类问题，一个非常简单的解决方案是前往网站，下载未经文明的文件并将其复制到我的vendor文件夹中，删除宝石并将这些文件用于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.

jquery-ui

Answer 2

按照以下顺序删除此代码中的$X行

var maps = new Array();

maps["k"] = 'Letter K';
maps["g"] = 'Letter G';
maps["c"] = 'Letter C';

var regex = /([kgc])a([kgc])a([kgc])a/g;

var text = 'kagaca';

text = text.replace(regex,function(){
  return maps[arguments[1]]+maps[arguments[2]]+maps[arguments[3]]
});//this now works

console.log(text);

text = 'kagaca';
text = text.replace(regex,maps["k"]+' '+ maps["g"]+' '+ maps["c"]);//this works

console.log(text);

希望能提供帮助