Simple star rating in Rails


Those who wants to include simple 5 star rating mechanism in their ROR application.Can include a couple of functions in their helper to provide a form a rating field and display the result.Of course no 1/2 ratings can be achieved through this way. One needs to include the below given two function to some helper. And in view inside form tag call…


  star_rating_field("object", "fieldname", options)

Options are location, prefix, active_img, grey_img, hover_img…

For displaying the result of the rating in star images format…call from view


  img_tag_for_star_rating(rating_value,options)

Options are location, active_img, grey_img, hover_img…

Download the function to include in helper from here …I am finding it very difficult to put the code in wordpress without tampering so better to put it somewhere else ;)

Update: the file gets removed everytime.I m trying to out the code here only...


  #General function for star rating
  # Use these function as helpers
  # No half ratings are handled here
  # options can hav ...
  # location=>location of images( you need to have star_active.gif, star_grey.gif, star_hover.gif in this directory or provide names of image file in options)
  # prefix => prefix to append to each ids in DOM for descrimination of more then one star rating in the same page
  # grey_img => name of inactive/grey image of star
  # active_img => name of active image of star
  # hover_img => name of hover image of star
  def star_rating_field(obj_name, field_name, options={:location=>'/images',:hover_img=>"star_hover.gif", :active_img=>"star_active.gif", :grey_img=>"star_grey.gif"})

    # append a hidden field to store value of viz system field
    # this field is to be changed as hidden after testing
    hid = text_field(obj_name, field_name)
    hid_id = "#{obj_name}_#{field_name}"
    pref_id = options[:prefix].nil? ? 'star' : options[:prefix]+'_star'
    img_location = options[:location]
    # set initial value by javascript
    jscript = ""
    jscript += "var a; var v = parseInt($('#{hid_id}').value); for(var i = 1;i"
    img = ''

    # add images to field
    for i in 1..5
      img += ""+' '
    end
      return  img + hid + jscript
  end

  def jscript_for_star_rating(pref_id, img_location)
    jscript = " function set_star_status(n, id)    {  if( $(id).value != n){ for(var j=1; j"star_active.gif", :grey_img=>"star_grey.gif"})
    image = ''
    for i in 1..5
      if i "
      else
        image += ""
      end
    end
    return image
  end

Note:Do remember to include prototype library from script.aculo.us in your page.

UPDATE2:phew…finally trying to add the file again.Hope it work fine this time :( try this=>Star Rating functions

About these ads

About Ritu

A Ruby on Rails developer from India View all posts by Ritu

19 Responses to “Simple star rating in Rails”

  • Martin Smith

    But it doesn’t work.

    Is there a finished version coming?

    Martin

  • Ritu

    A version of this was working fine in my application.I modified it a bit for generalization.but didnt checked.I ll check and let you know.Btw can you tell me the exact problem.

  • Ritu

    Sorry i jus checked and realised my stupid mistake.I removed some code while formatting i will put it up here ASAP.

  • Martin Smith

    Excelent news Ritu!

    Lokking forward to it.

    Martin

  • Ritu

    Phew… finally i m able to put the whole code here… Sorry Martin if the previous crap written here has wasted your time :)

  • Martin Smith

    Ritu,

    Thanks for your work on this – I think it is great.

    There were a couple of typos in the code. I have a couple of changes that I am going to make to slightly enhance your wonderful work.

    I’ll post them back to you when I am done.

    Got to finish building my bathroom first though :-)

    Martin

  • Ritu

    Thnx Martin :)
    i m eagrly waiting for your version.but finish building your bathroom first.Its most important rite now ;)

  • bongoman

    Is there a demo somewhere where we can see this?

  • Ritu

    Sorry i m nt able to put up an online demo yet.

  • ctagg

    link doesn’t seem to be working :-(

  • Ritu

    have tried to post the code here only

  • kasper

    i’ve a problem with the code above. i don’t understand which quote to use. ” “ ’. please, help.

  • seb

    Hi Ritu,

    Found your code and like the way you implement it. Thanx for sharing.
    I notice it works well under IE 6 and Safari but doesnt with Firefox 2.

    Do you have any ideas?

  • Ritu

    @seb i use FF 2 only and it was working fine for me…do u use firebug?? please see if there firebug is showing an error…

  • seb

    Hi Ritu!

    Thanx for your answer.
    I actually call your helper like :

    And here’s the result under firebug :
    evaluation_note is not defined
    onclick(click clientX=0, clientY=0)

    Do not loose your time Ritu if this error isn’t easy to debug. I’m going to make it work even if i do not know javascript :)

    Regards from Paris,
    Seb

  • seb

    Found my bug :
    On the call of onclick :
    I had to change
    onclick=’set_star_status(#{i},#{hid_id})’
    by
    onclick=’set_star_status(#{i},'#{hid_id}')’
    (meaning my second field must be simple quoted under ff2

    dont know why but seems to work fine.

  • seb

    the simple quote had to be coded as entities : & a p o s ;

  • jarrold

    Hi Ritu,

    This is really a great way to implement this. I really like it. I had the same bug as seb except I think the better way to solve it is the following
    onclick=\”set_#{pref_id}_status(#{i},’#{hid_id}’)\”

    using \” instead of \’ in the onclick declaration.

    I also found another bug when using more than 1 set of star ratings, I like the prefix thing. But i think you forgot to add the prefix to the set_star_status function.

    You should change all occurrences from set_star_status to set_#{pref_id}_status. If you don’t if you click on a star from 1 set of ratings, it might do funky stuff with some other ratings sets.

    I have one more bug in IE, that is when I mouseout, the onmouseout is not carried out for some reason and the stars stay at the mouseover value. Looking into that now…

    Works like a charm in Firefox though… thanks so much!

  • Ahmed ElDawy

    Customizing options is not working properly. You’ve to set all options or none at all.
    Here’s a fix

    def star_rating_field(obj_name, field_name, options={ } )
    # check invalid options
    allowed_options = [:location, :hover_img, :active_img, :grey_img, :prefix]
    raise "Unsupported options for star_rating #{(options.keys - allowed_options).inspect}" unless (options.keys - allowed_options).blank?
    # set default options for non specified options
    default_options = {:location=>'/images',:hover_img=>"star_hover.png", :active_img=>"star_active.png", :grey_img=>"star_grey.png"}
    options = default_options.merge(options)
    # ...
    # The rest of the method is unchanged
    end

    def image_tag_for_star_rating(val, options={})
    # check invalid options
    allowed_options = [:location, :hover_img, :active_img, :grey_img]
    raise "Unsupported options for star_rating #{(options.keys - allowed_options).inspect}" unless (options.keys - allowed_options).blank?
    # set default options for non specified options
    default_options = {:location=>'/images', :active_img=>"star_active.png", :grey_img=>"star_grey.png"}
    options = default_options.merge(options)
    # ...
    # The rest of the method is unchanged
    end

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: