Question

I am using Rails 3.2.3 and deploying to Heroku’s Cedar Stack and I am having problems with my asset pipeline and compiling the jQuery UI files I need.

Specifically the problem manifests itself in two separate issues that I think are related:

1) in development my dropdown buttons do not work, but in production they do

2) in development my datepicker and sliders do not work, and they also do not work in production. However, if I call the javascript (<script src="/assets/jquery-ui.js" type="text/javascript"></script>) at the top of my view, the datepicker and sliders work in development but not in production

I have tried compiling the assets locally and also during slug compilation, but to no avail.

My application.js:

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

My Gemfile:

source 'https://rubygems.org'

gem 'rails', '3.2.3'
gem 'bootstrap-sass', '2.0.0'
gem 'bcrypt-ruby', '3.0.1'
gem 'faker', '1.0.1'
gem 'will_paginate', '3.0.3'
gem 'bootstrap-will_paginate', '0.0.5'
gem 'date_validator'
gem 'jquery_datepicker'

group :development, :test do
gem 'sqlite3', '1.3.5'
gem 'rspec-rails', '2.9.0'
gem 'annotate', '~> 2.4.1.beta'
end

group :assets do
gem 'sass-rails',   '3.2.4'
gem 'coffee-rails', '3.2.2'
gem 'uglifier', '1.2.3'
end

gem 'jquery-rails', '2.0.0'

group :test do
gem 'capybara', '1.1.2'
gem 'factory_girl_rails', '1.4.0'
end

group :production do
gem 'pg', '0.12.2'
end

My config/environments/development.rb

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

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

My config/environments/production.rb:

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

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

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

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

My layout application.html.erb:

  <%= javascript_include_tag "application" %>

Answer 1

You don’t show us your code.
But my guess is it may be a dom load issue.

Try putting your instantiation inside a jQuery() call;

Here’s an example right from the twitter-bootstrap-rails;

jQuery(function($){
  $("a[rel=popover]").popover();
  $(".tooltip").tooltip();
  $("a[rel=tooltip]").tooltip();
});

The same should go for any jquery UI autocompleters

jQuery(function($){
  $("input.search-autocomplete").autocomplete({
    source: "/search"
  });
});