Rails: jQuery-Ui does work on localhost, but not on heroku

Question

My rails project works on localhost, but not on heroku.

I'm using the jQuery-ui gem. When pushed to heroku, errors like this occur:

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

jQuery on the other hand works. How do I get jQuery-ui to work on heroku?

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

rails assets:precompile will produce the same errors.

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]

code that does not work on 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

Follow the bellow order and remove the //= require rails-ujs line from this code

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

Hope to help

Answer 2

the best practice is to remove require_tree and require each file in the following order

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

Then you need to test your production environment with rails s -e production to see if you experience the same problem on local production environment.

A solution could be to perform RAILS_ENV=production bundle exec rake assets:precompile and then retest rails s -e production

If you solve the problem, remember to commit your changes to github.

If you do not solve the problem, always remember that you can inspect the heroku/local production page like this

1. go to your heroku page for ex https://surfcheck.herokuapp.com
2. open the chrome developer tools with f12
3. select the Sources tab
4. select the application-fingerprinted.js file
5. pretty pint the file with {}
6. search for the jquery-ui function .draggable or any other function

I had this type of jquery-ui problems in the past, a very simple solution was heading to the jquery-ui site, downloading the unminified files and coping them in my vendor folder, deleting the gem and using those files for jquery.

Also to add, you are not getting the error in development because it is a precompilation issue. Your server is falling back to the files inside the gem folder as it does not find the jquery files in the application.js, this can be disabled in development with

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