title: Rails with Bootstrap, jQuery, and jQuery-UI not working on Heroku
body: <p>I have an application on Rails 5 that uses Bootstrap, jQuery, and jquery_ui. I use jquery_ui for dropdown menus. </p>
  
  <p>Dropdowns are broken on both development and production, I have no idea how to fix this.</p>
  
  <p><a href="http://i.stack.imgur.com/aycRj.png" rel="nofollow">A screenshot of the errors/warnings in the web console (production)</a> -- apparently I can't embed images, so I have to make do with a link.</p>
  
  <p>Gemfile:</p>
  
  <pre><code>source 'https://rubygems.org'
  
  # Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
  gem 'rails', '~&gt; 5.0.0'
  
  # Use sqlite3 as the database for Active Record
  gem 'sqlite3', group: :development
  
  
  #### HEROKU SPECIFIC GEMS #####
  gem 'pg', '0.18.1', group: :production
  ################################
  
  # Use Puma as the app server
  gem 'puma', '~&gt; 3.0'
  
  # Use SCSS for stylesheets
  gem 'sass-rails', '~&gt; 5.0'
  
  # Use Uglifier as compressor for JavaScript assets
  gem 'uglifier', '&gt;= 1.3.0'
  
  # Use CoffeeScript for .coffee assets and views
  gem 'coffee-rails', '~&gt; 4.2'
  
  # Use jquery as the JavaScript library
  gem 'jquery-rails'
  gem 'jquery-ui-rails', '~&gt; 5.0', '&gt;= 5.0.5'
  
  # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
  gem 'jbuilder', '~&gt; 2.5'
  
  # Authentication with Devise
  gem 'devise'
  
  # Bootstrap framework
  gem 'bootstrap-sass', '~&gt; 3.3', '&gt;= 3.3.6'
  
  # Markdown parser
  gem 'redcarpet', '~&gt; 3.3', '&gt;= 3.3.4'
  
  # Markdown syntax highlighting
  gem 'coderay'
  
  # Admin panel
  gem 'remotipart', github: 'mshibuya/remotipart'
  gem 'rails_admin', '&gt;= 1.0.0.rc'
  
  # Forms the easy way
  gem 'simple_form', '~&gt; 3.2', '&gt;= 3.2.1'
  
  gem 'seed_dump'
  
  group :development, :test do
    # Call 'byebug' anywhere in the code to stop execution and get a debugger console
    gem 'byebug', platform: :mri
  end
  
  group :development do
    # Access an IRB console on exception pages or by using &lt;%= console %&gt; anywhere in the code.
    gem 'web-console'
    gem 'listen', '~&gt; 3.0.5'
    # 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', '~&gt; 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]
  
  ruby '2.3.1'
  </code></pre>
  
  <p>Application.js:</p>
  
  <pre><code>// This is a manifest file that'll be compiled into application.js, which will include all the files
  // listed below.
  //
  // Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
  // or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
  //
  // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
  // compiled file. JavaScript code in this file should be added after the last require_* statement.
  //
  // Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
  // about supported directives.
  //
  //= require jquery
  //= require jquery_ujs
  //= require bootstrap-sprockets
  //= require_tree .
  </code></pre>
  
  <p>Application.css.scss</p>
  
  <pre><code>/*
   * This is a manifest file that'll be compiled into application.css, which will include all the files
   * listed below.
   *
   * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
   * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
   *
   * You're free to add application-wide styles to this file and they'll appear at the bottom of the
   * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
   * files in this directory. Styles in this file should be added after the last require_* statement.
   * It is generally better to create a new file per style scope.
   *
   */
   @import 'jquery-ui/core.css';
   @import 'jquery-ui/datepicker.css';
   @import 'jquery-ui/theme.css';
   @import "bootstrap-sprockets";
   @import "bootstrap";
  
   .basic {
    td {
      padding: 5px;
    }
    border-collapse: collapse;
  }
  
  .alert-alert {
    @extend .alert-warning;
  }
  
  .alert-notice {
    @extend .alert-info;
  }
  
  #accordion  {
    h3:focus {
      outline: none;
    }
    .ui-state-active {
      background-color: #00AAE3;
    }
  }
  </code></pre>
  
  <p>...where am I going wrong? I've been researching this for the past three days and no dice.</p>
  
  <h2>Edit:</h2>
  
  <p>Ran some tests. If I put Bootstrap above jQuery in Application.js, dropdowns work on development but not on production (like so):</p>
  
  <pre><code>//= require bootstrap-sprockets
  //= require jquery
  //= require jquery_ujs
  //= require_tree .
  </code></pre>
  
  <p>However, I get reference errors ("can't find variable jQuery") on development (no errors on production).</p>
  
  <p>If I require them in the order that I do in Application.js above my edit, I don't get any reference errors, but dropdowns are broken on both development and production.</p>
  
  <p>Either way, I can't get them to work on production.</p>