swapImage {src: 'image2.jpg'} problem in Rails 3.1

Ruby on Rails
1

Hi:

I’m in the midst of upgrading my Rails app from 2.3 to 3.2, but I’m stuck on 3.1 at the moment.

I’m currently struggling with converting references to image filenames into a syntax that works with the asset pipeline. The main place I need with help with this issue is with my button rollover swapImage statements. Here’s an example:

<%= image_submit_tag "signin.jpg", {:class => "swapImage {src: '/images/signinHover.jpg'}" %>

I’ve tried substituting /assets/ for /images/. This works in development, but not in production, I assume because of the MD5 hash that the asset pipeline associates with asset files.

I’d like to use the image_path helper as the Rails Guides suggest, but it’s not clear to be what the syntax should be in this case.

Also, I notice that when I view source for the page with this button, the single quotes around /images/signinHover.jpg are escaped, so that I see:

<input class="swapImage {src: &#x27;/assets/signinHover.jpg&#x27;}" src="/assets/signin.jpg" type="image" />

I’m guessing this might be part of my problem.

I’d appreciate advice on how to implement swapImage correctly in Rails 3.1, with the proper syntax for images served by the asset pipeline. Alternatively, is there a better approach to rollover button images that I should use instead?

Thanks very much,

Dean Richardson
Genlighten.com

2

Hi @hikari17,

The syntax to use the image_path helper is as follows:

<%= image_submit_tag "signin.jpg", {:class => "swapImage { src: '#{image_path('signinHover.jpg')}' }" %>

It’s using string interpolation to use the helper inside of the string you already have.

Please let me know if you have any more trouble with this and how it goes, thanks!
-Chad

3

Hi Chad:

Thanks for this. I’ve implemented this change and it nicely gets around the issue of nesting double and single quotes to provide the JQuery swapImage function the src: argument it needs.

In development, everything now works as desired. The rollovers work great with no broken images. (Actually, they worked before, as long as I stuck /assets/ in front of the image names.)

Unfortunately, though, when I deploy this code to production, the rollover still doesn’t work. I get no apparent rollover response at all. Also, the single quote still appears escaped when I view source.

You can view this online at staging.genlighten.com/login. (Ignore the other current problem on that page with the broken CSS around the search form; that’s a question for Kyle Fielder, I’m guessing.) The “Sign In” button is the one with the swapImage rollover code. That button should display a somewhat darker button image in the hover state, but doesn’t.

I’m wondering now if perhaps I’m not loading my javascript/jquery assets correctly using the asset pipeline.

But when I check https://staging.genlighten.com/assets/application.js, I see the swapImage code appearing just fine.

I’m using EngineYard to host my site, so it’s also possible that something in their configuration doesn’t reflect my having upgraded to Rails 3.1, but that seems less likely than that the problem is something simple I’ve overlooked.

Any suggestions for next steps would be appreciated…

Thanks!

Dean Richardson
Genlighten.com