Dirk.Net

Note: this article uses jQuery, Ruby on Rails and CSS. It might be useful for other combinations.

You have a list of products and don’t want to force users to search for the link to the details page. Rather, give him some hover effect for each list item and let him click anywhere on the item. The list here is displayed as an unordered list (UL), but a similar technique should work with table rows (TR), divs or other block elements.

Several techniques are applied here:

Step 1: Turn the cursor into a pointer:

.list_item {cursor:pointer}; (believe it or not, WORKS in IE6!)

Step 2: Re-style the list item when the cursor is over it:

Civilized browsers, use the :hover pseudo element:

.list_item:hover {background-color:#a1a1a1}

That abomination from hell, IE666, use JavaScript, here’s a snippet for jQuery, note the syntax of the css function:

$(document).ready(function(){ 
$(’.list_item’).mouseover(function(){
      $(this).css({’background-color’:'#a1a1a1′})
        }
)
      .mouseout(function(){
          $(this).css({’background-color’:'#1a1a1a’})
      }
);
});

Or even better, get the prior color and reset on mouseout:

$(document).ready(function(){
var orig_bg;
$(’.list_item’).mouseover(function(){
orig_bg = $(this).css(’background-color’);
      $(this).css({’background-color’:'#a1a1a1′})
        }
)
      .mouseout(function(){
          $(this).css({’background-color’:orig_bg})
      }
);
});

Step 3: Bind the click event to every list item:

As every list item likely has a link to the details  page, pilfer the url from there, no need to dig into the Rails routes. Here’s the jQuery code:

$(document).ready(function(){
$(’.list_item’)
.click(function(){
//now $(this) refers to the current list_item element, dig deeper with .find() to get the link:
var details_link = $(this).find(’a#details_link’)[0].href;
//do the ‘redirect’:
     parent.location.href = details_link;
}
)   
});

Summing up, this is all pretty easy thanks to the power of jQuery. There was no need to use Rails’ div_for to get to the product links or generate them, just get everything out of the DOM. There might be a leaner, DRYer or easier way to do this, if you know better, please post a comment.

This article explains the approach but I had problems getting the implementation to work (can’t convert BigDecimal into String errors). So here’s my solutions:

Create a file in #{RAILS_ROOT}/config/initializers, which you can name anything you want, for example my_currency_helpers.rb

Paste this code:

module ActionView
  module Helpers
    module NumberHelper
      def number_to_currency_with_euro(number, options = {})
        defaults = {
          :unit => ‘€’, #obvious
          :precision => 2, #digits after separator
          :separator => ‘,’,
        :delimiter => ‘.’, #thousands delimiter
        :format => “%n %u” } #put a space between number (%n) and unit (%u) and unit is after number
        s = number_to_currency_without_euro(number, defaults.merge(options))
      end
      alias_method_chain :number_to_currency, :euro
    end
  end
end

The above is the formatting for the Euro in Germany, you can easily adjust this code to work with other currencies. Just copy and paste the same code in the same file, rename alias and function and adjust the options. Hope it helps.

If you have trouble getting simple_captcha to work with your Rails application, i.e. you enter the correct captcha string but still get the

“Secret Code did not match with the Image”

or similar error, look for this error in your log:

Can’t mass-assign these protected attributes: captcha_key, captcha.

To solve this issue, you’ll have to add

attr_accessible :captcha, :captcha_key

to your model. Here’s how to test simple_captcha.

In script console the app object exposes ActionController::Integration::Session which contains all your routes, so you can go:

app.widgets_path

etc. No need  (comment) to include ActionController::UrlWriter

But to use your routes in the model, you wouldn’t use an instance of ActionController::Integration::Session, no, don’t, it’s a terrible hack, dirty and immoral, bordering on evil, MVC abused and perverted. Then again, you never know…

Here’s the solution:

In environment.rb, put this

I18n.load_path = Dir.glob(”#{RAILS_ROOT}/locales/**/*.{rb,yml}”)
I18n.default_locale = ‘en’
I18n.reload!

This was the only place I could get the I18n.reload! command to help with this issue.