jQuery Datepicker doesn't work on Heroku/Rails 3.1

Question

Hello everybody out there,

I'm very frustrated with the jQuery Datepicker and Rails 3.1. It runs perfectly in my develoment environment, but it doesn't work in the production environment on Heroku/Cedar. It simply doesn't pop-up when I select my date field.

So here's what I did so far:
I put the jquery files into \apps\assets\javascript:

• jquery-1.7.1.min.js
• jquery-ui-1.8.17.custom.min.js
• jquery.ui.datepicker-de.js

and I added them among other files to my production.rb:

# Precompile additional assets (application.js, application.css, and all non-JS/CSS are already added) <br />
config.assets.precompile += %w( event_calendar.js event_calendar.css jquery-1.7.1.min.js jquery-ui-1.8.17.custom.min.js jquery-ui-1.8.17.custom.css jquery.ui.datepicker-de.js)

Then I precompiled my assets locally as described here and they appeared correctly in /public/assets/ and in my manifest.yml. So everything looks good and I don't get any errors while pushing my app to Heroku, but when I select my text field associated with the datepicker nothing happens, it simply doesn't show up.

Any ideas what could be wrong here?
How can I find out what the problem is?

In the Heroku Logs I can only find entries like this:

cache: [GET /assets/application-58ec8ec4b5384a8fb8d7884169385e49.css] miss

Would be happy if somebody could help, please.

---

Update:

Here's my application.js:

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

$(document).ready(
  function()
  {
    $("#picker").datepicker($.datepicker.regional['de']);
    $("#picker").datepicker();
  }
);

As far as I know //= require_tree . takes care of including all javascript files in the assets folder, like \app\assets\javascripts\. Does that include precompiled assets in \public\assets ???.

And here's my application.css:

/*
 * This is a manifest file that'll automatically include all the stylesheets available in this directory
 * and any sub-directories. You're free to add application-wide styles to this file and they'll appear at
 * the top of the compiled file, but it's generally better to create a new file per style scope.
 *= require_self
 *= require_tree . 
*/
...

Same here, I thought *= require_tree . takes care of \app\assets\stylesheets as well as for \public\assets, where my precompiled stylesheets are.

Here the link to the app on heroku, selecting the date field should pop-up the calendar:
http://smooth-window-1858.herokuapp.com/events/new

Answer 1

In the meantime I found out what's wrong with my project.
I had to disable Rails's static asset server in \config\environments\production.rb:

config.serve_static_assets = true

Overmore, I had to add jquery-rails to my Gemfile:

gem 'jquery-rails'

Now the datepicker works fine, and I removed the jquery .js files from /app/assets/javascript, because the gem takes care of that. However, I think jquery files are added in the process of asset precompilation. Where do they come from?

And how can asset precompilation (required by Heroku) work, when I simply refer the Google CDN in my layout, like:

  <%= stylesheet_link_tag "http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/redmond/jquery-ui.css", "application" %>
  <%= javascript_include_tag "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js", "http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js", "application" %>

Answer 2

The reason they probably don't show is that you have not referenced them correctly in you views.

Adding files to precompile does ensures that there is a copy of the files available for direct reference in a helper method, but it does not include those files in views.

If you do reference them in your views, you need to use the Rails helper methods and not hard link to them. The Rails' helpers handle inserting the correct production filenames.

The normal way (the best practice) is to require these files inside your application.js and application.css manifests.

You should not see cache miss/hit entries in your production log. This is an indication that your application is not using the precompiled files, but passing the requests to Sprockets.

There are two possible reasons for this: one is that you have hard linked to the files (i.e. not used the helper methods) and two, the pipeline is not configured correctly.

Check your configuration settings against those in the last section of the asset pipeline guide.

Reply to Update and comment:

require_tree IMPORTS the files in the javascript and stylsheets folder into the master manifests.

In the case of your JS you would have all those required files in your application.js in that order. None of those required files would exist in public/assets because they are rolled into the manifest and do not have to be separately precompiled (they can be removed from the precompile array).

You only have to be specific where the order of files is important - for example jquery and jquery ujs should come first in the order you have them.

Answer 3

You are missing css file, not js file i guess. Check the error. Make sure jquery-ui-1.8.17.custom.css exists in stylesheets folder, also there should be a datepicker stylesheet in your stylesheets folder so that datepicker should shows off.

If the error is still there then Paste your application.js file and application.css file here.