Rails and Jquery

Rails
1

I am developing an application in rails 3.2 with gem jquery-rails. I am
using development mode, but will change to production soon. Then this
error
which I get in development mode – No route matches [GET]
“/jquery/ui-bg_flat_75_ffffff_40x100.png”) – had to be fixed. Jqueru-ui
has a rule with url(…/jquery/ui-bg_flat_75_ffffff_40x100.png) that does
not work in my environment. I have tried to correct it in my own jquery
file but it is still there, I have disabled my own jquery-ui files but I
still get the error and jquery-ui works in the application. My
conclusion
is that jquery-ui is loaded outside my application or it is a caching
problem. How can I change the url in this jquery-ui that I cannot
control?
How can I empty the cash ( I am using appach)? How is jquery-ui loaded
when
only gem jquery-rails is used? I have also tried to use the other
different gems that should take care of jquery-ui but I still get the
same
error.
Any Help would be very appreciated !!

2

Hi Hans,

It sounds like the asset pipeline might not be loading jQuery correctly.
Have you checked out this gem? GitHub - jquery-ui-rails/jquery-ui-rails: jQuery UI for the Rails asset pipeline

I’ve found it useful in the past to use jquery-rails and it’s friends to
load this stuff.

Hopefully this resolves your issue.
Thanks,
Timothy.

3

Hans-

You definitely have run into a snag with Asset Pipeline. It can be a
little tricky if you aren’t familiar with it, and you should be sure to
rule out caching issues.

here’s how:

  1. If you have compiled assets (you ran rake asset:compile), your Rails
    app will serve the compiled assets from public/assets/ . You’ll know if
    you have compiled assets if you see a folder and content at
    public/assets/. You can trash that folder to force Rails to not use
    compiled assets. Normally I would recommend you never compile your
    assets locally and let your deployment compile your assets.

  2. Very rarely I see either the Rails cache or the Sass cache hold onto
    things. It isn’t supposed to in development, but I have seen it. To
    clear that try rm -rf tmp/cache/ tmp/sass-cache/ at the root of your
    project.

  3. Finally be sure that your browser isn’t caching. Note that some
    browsers let you Option-key refresh to forcibly reload, but in recent
    versions of Chrome they switched it to Shift-key instead of Option-key
    (which is confusing if you aren’t expecting that). Also try deleting
    history/cached files from your browser.

  4. Restart your Rails server to force it to pick up changes, of course.

Note that you normally don’t have to do this. It is only under special
circumstances (and very rare) that you need to do all of these steps in
development.

The above steps will solve your caching issues only. They do not address
the underlying problem, which is that your CSS files load from
/assets/application.css. That file references a resource at
…/jquery/ui-bg_flat_75_ffffff_40x100.png. That means your user’s
browser is trying to look for /jquery/ui-bg_flat_75_ffffff_40x100.png
which doesn’t exist.

This particular problem I believe is a flaw in the Asset Pipeline
design. You have three options:

  1. Re-write your CSS to use the asset-path helpers that will correctly
    create the path (that doesn’t work when using the gem since the CSS code
    is inside the gem!)

  2. Use a different Gem (like the one suggested to you by the other
    commenter)

  3. Move the images & fonts that jquery-ui needs into the /public folder,
    in a subfolder for /jquery so that they load where the CSS is expecting
    them to load.

Personally I always avoid use of the jquery-rails gem. In my apps, I
always copy jQuery files (including JS, CSS, fonts, images) into my app
and then reference them directly from my manifest files. There are
severals reasons for this, including:

  1. It lets gives you better control over things like the problem you are
    describing above.

  2. You always know exactly which version of jQuery you are loading, and
    it is locked in place at that version. (If you do bundle update
    jquery-rails in the future, you could very well update to a new version
    of jQuery that could break lots of JS code on your front end)

  3. Many large apps I work with actually have different versions of
    jQuery installed. Although I never load 2 different versions of jQuery
    at the same time, I do this when I want to upgrade to a newer version of
    jQuery incrementally, and optionally load the new jQuery on certain
    pages while keeping the old versions of jQuery for other areas of my
    website. This is impossible to do with jquery-rails gem, and in fact
    jquery-rails gem makes it very difficult to upgrade jQuery from the
    version you choose to start your codebase.

-Jason