jQuery on rails not working in production on heroku & cedar

Question

I've got jQuery and jQuery UI both working locally, but they are just refusing to work in my production environment (Cedar/Heroku if that helps).

I'd done a load of research on this but am still baffled, and hoping someone can help me out.

I'm trying to get two things working regarding javascripts:

jQuery close function - and -
jQuery UI accordion

Scripts being called in the index.html.erb file:

<script>
    $(function() {
$( "#accordion" ).accordion();
});
</script>

<div class="demo">
<h2>JQuery UI Accordion - works in development, but not production</h2><br>
<div id="accordion">
<h3><a href="#">Section 1</a></h3>
   <div>
      <p>
        (text removed).
      </p>
   </div>
<h3><a href="#">Section 2</a></h3>


<div class="alert alert-success">
   <button type="button" class="close" data-dismiss="alert">×</button>
   <strong>Click the X in the right of this box. </strong> It should close in production, but it doesn't. Yet it closes in development - strange!<br>
</div>

jQuery being called in application.html.erb:

<%= javascript_include_tag "application" %>
<%= javascript_include_tag "jquery-ui" %>

Here's application.js:

// This is a manifest file that'll be compiled into including all the files listed below.
// Add new JavaScript/Coffee code in separate files in this directory and they'll automatically
// be included in the compiled file accessible from http://example.com/assets/application.js
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// the compiled file.
//
//= require_tree .

In my /assets/javascripts directory the following files exist: jquery-1.7.2.min.js, jquery-us-1.8.20.custom.min.js and jquery.ui.accordion.js

They can be found by manually loading their URLs too (so I have confirmed they are being uploaded during git pushes).

The application.rb file:

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 Aqua
  class Application < Rails::Application

    # 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 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 #added as per rubyguides 4.1 asset pipeline
  end
end

Gemfile showing jQuery is being called (bundle install has been run):

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

#gem 'mysql2' removed for pg required on Heroku
gem 'pg' #added as per Heroku requirements
gem 'omniauth'
gem 'omniauth-twitter'
gem 'omniauth-facebook'
gem 'omniauth-openid', :git => 'git://github.com/intridea/omniauth-openid.git'
gem 'thin'

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

gem 'jquery-rails'

(removed a bunch of commented out fields)    

group :test do
  # Pretty printed test output
  gem 'turn', '~> 0.8.3', :require => false
end

development.rb:

Aqua::Application.configure do
  # Settings specified here will take precedence over those in config/application.rb

  # In the development environment your application's code is reloaded on
  # every request.  This slows down response time but is perfect for development
  # since you don't have to restart the web server when you make code changes.
  config.cache_classes = false

  # Log error messages when you accidentally call methods on nil.
  config.whiny_nils = true

  # Show full error reports and disable caching
  config.consider_all_requests_local       = true
  config.action_controller.perform_caching = false

  # Don't care if the mailer can't send
  config.action_mailer.raise_delivery_errors = false

  # Print deprecation notices to the Rails logger
  config.active_support.deprecation = :log

  # Only use best-standards-support built into browsers
  config.action_dispatch.best_standards_support = :builtin

  # Do not compress assets
  config.assets.compress = false

  # Expands the lines which load the assets
  config.assets.debug = true
end

and finally, production.rb:

Aqua::Application.configure do
  # Settings specified here will take precedence over those in config/application.rb

  # Code is not reloaded between requests
  config.cache_classes = true

  # Full error reports are disabled and caching is turned on
  config.consider_all_requests_local       = false
  config.action_controller.perform_caching = true

  # Disable Rails's static asset server (Apache or nginx will already do this)
  config.serve_static_assets = true

  # Compress JavaScripts and CSS
  config.assets.compress = true

  # Don't fallback to assets pipeline if a precompiled asset is missed
  config.assets.compile = true

  # Generate digests for assets URLs
  config.assets.digest = true

  # Defaults to Rails.root.join("public/assets")
  # config.assets.manifest = YOUR_PATH

  # Specifies the header that your server uses for sending files
  # config.action_dispatch.x_sendfile_header = "X-Sendfile" # for apache
  # config.action_dispatch.x_sendfile_header = 'X-Accel-Redirect' # for nginx

  # Force all access to the app over SSL, use Strict-Transport-Security, and use secure cookies.
  # config.force_ssl = true

  # See everything in the log (default is :info)
  # config.log_level = :debug

  # Use a different logger for distributed setups
  # config.logger = SyslogLogger.new

  # Use a different cache store in production
  # config.cache_store = :mem_cache_store

  # Enable serving of images, stylesheets, and JavaScripts from an asset server
  # config.action_controller.asset_host = "http://assets.example.com"

  # Precompile additional assets (application.js, application.css, and all non-JS/CSS are already added)
  # config.assets.precompile += %w( search.js )

  # Disable delivery errors, bad email addresses will be ignored
  # config.action_mailer.raise_delivery_errors = false

  # Enable threaded mode
  # config.threadsafe!

  # Enable locale fallbacks for I18n (makes lookups for any locale fall back to
  # the I18n.default_locale when a translation can not be found)
  config.i18n.fallbacks = true

  # Send deprecation notices to registered listeners
  config.active_support.deprecation = :notify
end

Thanks to feedback below, I have noticed in my dev environment I have all javascripts loading and no erros (when looking via chrome dev tools under scripts). There are only 2 javascripts shown in production and both have errors as per below:

application.js

Uncaught TypeError: Cannot read property 'fn' of undefined

jquery-ui.js

Uncaught ReferenceError: jQuery is not defined

In the .erb html file here's the error when the script tries to run (*'s added to show where it comes up in red in chrome):

<script>
    $(function() {
******  Uncaught ReferenceError: $ is not defined *********
        $( "#accordion" ).accordion();
    });
    </script>

Any ideas? Is this a rails asset pipeline issue or something else? Running heroku logs isn't giving me any detailed error messages.

Thanks in advance from an L-plater on Rails :)

Interesting, I can see all my javascripts in my dev environment, I'll paste them now to the end of my question. Thanks for your help so far! — xander
– xander, Commented Jun 17, 2012 at 12:58

xander · Accepted Answer · 2012-06-18 11:03:26Z

2

I worked out the issue is related to the rails asset pipeline.

I'm still not entirely sure why it happens, but the application.js was incorrectly compiling jquery (etc).

My short term workaround (which is not that much trouble really) is to manually add each separate javascript file into my master layout html.erb page, and from there it filters into each other one.

Sure it involves more separate loads, but my site isn't high volume and it hasn't noticeably degraded performance.

Once I get a better understanding about the rails pipeline I'll go back and sort it out permanently.

answered Jun 18, 2012 at 11:03

xander

1192 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery on rails not working in production on heroku & cedar

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related