JavaScript not loading correctly on Heroku Cedar stack Rails application

Question

I am experiencing basically the same problem as outlined by SO post:

jQuery script not loading on production (Heroku - cedar stack)

In the development environment, my javascript is built in to the pages correctly:

<link type="text/css" rel="stylesheet" media="all" href="/assets/rails_admin/imports.css?body=1">
<link type="text/css" rel="stylesheet" media="all" href="/assets/rails_admin/rails_admin.css?body=1">
<script type="text/javascript" src="/assets/jquery.js?body=1">
<script type="text/javascript" src="/assets/jquery_ujs.js?body=1">
<script type="text/javascript" src="/assets/jquery.iframe-transport.js?body=1">
<script type="text/javascript" src="/assets/jquery.remotipart.js?body=1">
<script type="text/javascript" src="/assets/jquery.ui.effect.js?body=1">
<script type="text/javascript" src="/assets/jquery.ui.core.js?body=1">
<script type="text/javascript" src="/assets/jquery.ui.widget.js?body=1">
<script type="text/javascript" src="/assets/jquery.ui.mouse.js?body=1">
<script type="text/javascript" src="/assets/jquery.ui.sortable.js?body=1">
<script type="text/javascript" src="/assets/jquery.ui.position.js?body=1">
<script type="text/javascript" src="/assets/jquery.ui.menu.js?body=1">
<script type="text/javascript" src="/assets/jquery.ui.autocomplete.js?body=1">
<script type="text/javascript" src="/assets/jquery.ui.datepicker.js?body=1">
<script type="text/javascript" src="/assets/rails_admin/jquery.ui.timepicker.js?body=1">
<script type="text/javascript" src="/assets/rails_admin/ra.datetimepicker.js?body=1">
<script type="text/javascript" src="/assets/rails_admin/jquery.colorpicker.js?body=1">
<script type="text/javascript" src="/assets/rails_admin/ra.filter-box.js?body=1">
<script type="text/javascript" src="/assets/rails_admin/ra.filtering-multiselect.js?body=1">
<script type="text/javascript" src="/assets/rails_admin/ra.filtering-select.js?body=1">
<script type="text/javascript" src="/assets/rails_admin/ra.remote-form.js?body=1">
<script type="text/javascript" src="/assets/rails_admin/jquery.pjax.js?body=1">
<script type="text/javascript" src="/assets/jquery_nested_form.js?body=1">
<script type="text/javascript" src="/assets/rails_admin/ra.nested-form-hooks.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-transition.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-affix.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-alert.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-button.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-carousel.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-collapse.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-dropdown.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-modal.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-scrollspy.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-tab.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-tooltip.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-popover.js?body=1">
<script type="text/javascript" src="/assets/bootstrap-typeahead.js?body=1">
<script type="text/javascript" src="/assets/bootstrap.js?body=1">
<script type="text/javascript" src="/assets/rails_admin/ra.widgets.js?body=1">
<script type="text/javascript" src="/assets/rails_admin/ui.js?body=1">
<script type="text/javascript" src="/assets/rails_admin/themes/default/ui.js?body=1">
<script type="text/javascript" src="/assets/rails_admin/custom/ui.js?body=1">
<script type="text/javascript" src="/assets/rails_admin/rails_admin.js?body=1">

But in Production on Heroku (Cedar stack) it looks like:

<html>
<head>
<meta content='text/html; charset=utf-8' http-equiv='Content-Type'>
<meta content='NONE,NOARCHIVE' name='robots'>
<meta content="authenticity_token" name="csrf-param" />
<meta content="mJAzj+IxBGxFd4vVR9EZKX9a0CL9zSugp5a13vcCOGY=" name="csrf-token" />
<link href="/assets/rails_admin/rails_admin-babb206bf505b710a7e6ec10b27d3190.css" media="all" rel="stylesheet" type="text/css" />
<script src="/assets/rails_admin/rails_admin-315877c5aae48e12a1abd274be846d08.js" type="text/javascript"></script>
</head>

Based on my research, everyone seems to point to precompiling assets as a resolution, but I've tried dozens of solutions and none have resolved the issue.

I've tried to precompile assets prior to pushing to Heroku using the command:

RAILS_ENV=production bundle exec rake assets:precompile

but the problem still appears

Here are some relevant files:

Gemfile:

source 'https://rubygems.org'

gem 'rails', '3.2.11'

# Bundle edge Rails instead:
# gem 'rails', :git => 'git://github.com/rails/rails.git'

gem 'pg'
gem 'rails_admin'
gem 'cancan'
gem 'bootstrap-sass'
gem 'jquery-rails'
gem "devise"

group :development, :test do
   gem 'rspec-rails'
end

# Gems used only for assets and not required
# in production environments by default.
group :assets do
   gem 'sass-rails',   '~> 3.2.3'
   gem 'coffee-rails', '~> 3.2.1'
   gem 'uglifier', '>= 1.0.3'
   gem 'bootstrap-rails'
end

application.js

// 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 vendor/assets/javascripts of plugins, if any, 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
// the compiled file.
//
// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
// GO AFTER THE REQUIRES BELOW.
//
//= require jquery
//= require jquery_ujs
//= require_tree .

application.rb

require File.expand_path('../boot', __FILE__)

require 'rails/all'

if defined?(Bundler)
  # If you precompile assets before deploying to production, use this line
  Bundler.require(*Rails.groups(:assets => %w(development test)))
  # If you want your assets lazily compiled in production, use this line
  # Bundler.require(:default, :assets, Rails.env)
end

module MaterialsCalculatorApp
  class Application < Rails::Application
    # Settings in config/environments/* take precedence over those specified here.
    # Application configuration should go into files in config/initializers
    # -- all .rb files in that directory are automatically loaded.

    # Custom directories with classes and modules you want to be autoloadable.
    # config.autoload_paths += %W(#{config.root}/extras)

    # Only load the plugins named here, in the order given (default is alphabetical).
    # :all can be used as a placeholder for all plugins not explicitly named.
    # config.plugins = [ :exception_notification, :ssl_requirement, :all ]

    # Activate observers that should always be running.
    # config.active_record.observers = :cacher, :garbage_collector, :forum_observer

    # Set Time.zone default to the specified zone and make Active Record auto-convert to this zone.
    # Run "rake -D time" for a list of tasks for finding time zone names. Default is UTC.
    # config.time_zone = 'Central Time (US & Canada)'

    # The default locale is :en and all translations from config/locales/*.rb,yml are auto loaded.
    # config.i18n.load_path += Dir[Rails.root.join('my', 'locales', '*.{rb,yml}').to_s]
    # config.i18n.default_locale = :de

    # Configure the default encoding used in templates for Ruby 1.9.
    config.encoding = "utf-8"

    # Configure sensitive parameters which will be filtered from the log file.
    config.filter_parameters += [:password]

    # Enable escaping HTML in JSON.
    config.active_support.escape_html_entities_in_json = true

    # Use SQL instead of Active Record's schema dumper when creating the database.
    # This is necessary if your schema can't be completely dumped by the schema dumper,
    # like if you have constraints or database-specific column types
    # config.active_record.schema_format = :sql

    # Enforce whitelist mode for mass assignment.
    # This will create an empty whitelist of attributes available for mass-assignment for all models
    # in your app. As such, your models will need to explicitly whitelist or blacklist accessible
    # parameters by using an attr_accessible or attr_protected declaration.
    config.active_record.whitelist_attributes = true

    # Enable the asset pipeline
    config.assets.enabled = true

    # Version of your assets, change this if you want to expire all your assets
    config.assets.version = '1.0'

    config.assets.initialize_on_precompile = false
  end
end

Everything works fine in development, it's just deploying to Heroku where I see issues. Please let me know if there are any additional files which may be helpful in debugging this issue and I will provide them.

I don't understand what the problem is here. On Heroku, your assets are going to be precompiled down into one file for CSS and one file for JavaScript. Are you actually seeing some real JavaScript errors or is the question more about why there's only two files shown int he head tag for your output? — Ryan Bigg
Ryan, thanks for the comment. I did not realize on Heroku that it is compiled down to one file for js and css, so that definitely provided some insight. But the main issue is that I've got two dropdowns that are not working on Heroku, but works fine locally. <a class="dropdown-toggle" data-toggle="dropdown" href="#">. I was under the impression that something not loading correctly with bootstrap-dropdown and potentially why the dropdowns were not working on Heroku. What woudl be the best way to troubleshoot the issue? — Lee Graham

Lee Graham Lee Graham · Accepted Answer · 2013-01-25T23:20:28

I initially thought it was something that was going on specifically with Heroku. However, it appears I found the issue. Twitter Bootstrap appeared to not be playing well with rails_admin and I was able to add the following file to app/assets/javascripts/rails_admin

rails_admin.js

//=  require 'jquery'
//=  require 'jquery_ujs'
//=  require 'jquery.ui.effect'
//=  require 'jquery.ui.sortable'
//=  require 'jquery.ui.autocomplete'
//=  require 'jquery.ui.datepicker'
//=  require 'rails_admin/jquery.ui.timepicker'
//=  require 'rails_admin/ra.datetimepicker'
//=  require 'rails_admin/jquery.colorpicker'
//=  require 'rails_admin/ra.filter-box'
//=  require 'rails_admin/ra.filtering-multiselect'
//=  require 'rails_admin/ra.filtering-select'
//=  require 'rails_admin/ra.remote-form'
//=  require 'rails_admin/jquery.pjax'
//=  require 'jquery_nested_form'
//=  require 'rails_admin/ra.nested-form-hooks' 
//=  require 'twitter/bootstrap'
//=  require 'rails_admin/ra.widgets'
//=  require 'rails_admin/ui'
//=  require 'rails_admin/custom/ui'

and I also added this line to application.rb

config.assets.precompile += ['rails_admin/rails_admin.css', 'rails_admin/rails_admin.js']

All of my js dropdowns appear to be working now.

JavaScript not loading correctly on Heroku Cedar stack Rails application

1 Answers