New jQuery Rater Plugin for Star Ratings

Posted in ASP.NET, BlogSvc, C#, jQuery by Jarrett on 9/29/2008 1:37:00 AM - CST

The jQuery Star Rating widget is a neat control to add to your website. It has many options that allow you to easily customize it. However, it's usage is based on a fully degradable form submission model which means you must use markup containing an option list. Unfortunately, this means it becomes quite complex to support a rating model that fires off an ajax request to submit a new rating. Therefore, the developer is left to worry about:

Writing code on the server to generate the option list only for users that have not already rated
If the user has already rated, the server must generate different markup, or set the widget to disabled
The developer must write javascript to handle the widget callback and build an ajax request
No built in support for rating count and updated rating result
No built in support for a failed rating

To make life easier, I wrote the jQuery Rater Plugin that should reduce the complexity of implementing an ajax rating scenario.

jQuery Rater Plugin Demo

Features

Auto Ajax posting
Supports rating update and rating count
Shows previous rating before user has rated
Markup is same for rated and unrated
Supports step ratings (partial stars)

View the Demo Page

First, lets take a look at the markup which is contained in an ASP.NET user control. However, you could write this in your server language of choice. There are three things being set below. The width of the stars, the current rating, and the count of ratings.

RaterMarkup

The only markup elements required by the plugin are the "ui-rater-starsOff" and "ui-rater-starsOn" spans. Also, they must be contained within an element that has an id you can reference.

We only need to activate the plugin when the user has not already rated the entry.

The only option I've set is the address to post the rating to. When the user performs a rating, the plugin will automatically build an ajax request to the postHref. It includes the id and chosen rating value in the form post data.

This plugin does more with less code than the existing jQuery Star Rating Widget because it foregoes the degrade-ability in favor of ajax.

Previous Javascript size: ui.core.packed.js 4KB + ui.stars.pack.js 4KB + rate.js 2KB = 10KB
New Javascript size: jquery.rater.js 3KB (unpacked)

View the source code

To see a full server implementation, see the source code of AtomSite.

Download jQuery Rater Plugin (javascript + demo html + image + sample server page)

Found this plugin useful? Please kick it -

Comments

Posted by DotNetKicks on 9/22/2008 12:01:28 AM - CST

You've been kicked! A good thing.

Posted by Daniel on 10/5/2008 9:52:59 PM - CST

Hi Jarrett,
I'm liking the plug in so far - how would I go about using multiple ratings on my page and passing an id for the relevant rating div to my ASHX on the query string? I'm guessing, something like: $('.testRater').rater({ postHref: 'http://blah/rateThis.ashx?id=' + $(this).attr('id') }); ... Thanks, D

Posted by Daniel on 10/5/2008 10:12:04 PM - CST

aha - to answer my own question, put the ID on the div and find all such div's by marking them with the class 'testRater':
$('.testRater').each(function(){ $(this).rater({ postHref: 'http://blah/rateThis.ashx?id=' + $(this).attr('id') }); }); Thanks Jarrett! D

Posted by Jarrett on 10/8/2008 12:22:17 PM - CST

Hey Daniel, glad you figured it out. Also, the plugin will automatically post the id along with the rating during the ajax request so it isn't necessary (unless you want) to use a querystring.

Posted by Dino Baskovic on 11/8/2008 5:30:32 PM - CST

I noticed on jquery's site they use 'rate.php' for the callback. I take it you're a .NET guy. Have you come across any good PHP examples? I can write my own, but rather not take the time if one it already in the wild.
Otherwise, GREAT work here!

Posted by Ian Serlin on 11/13/2008 3:43:16 AM - CST

Hey Jarret,

Thanks for the plugin, short and sweet, I like it. I made a 5 line modification that allows the rater to work even if it's initially contained within a hidden element (for instance, roll-over the content to see the rater). The problem is that if .rater(...) is called on a hidden element then .height() and .width() are both 0, at least in FF3 and thus opts.size is 0.
If you'd like the code just shoot me an email.
Ian Serlin

Posted by co. on 11/18/2008 6:42:51 PM - CST

firstly, great script. i have chosen it for as default for voting. now, how to disable voting when already voted? i get information from cookie, but cant figure out how to make javascript disable onmouseovers

Posted by flyaflya on 11/27/2008 8:49:45 PM - CST

bugs in ie:
1.when move the mouse to tail, the rating image became very long, I guess line: width = Math.ceil(width / (opts.size / opts.step)) * opts.size / opts.step; can't work correctly in ie, so I insert a line, if (width > 90) width = 90; after it, then It work fine. 2.start.png has a shadow in ie, ie can't support png perfectly, convert it to gif can fix it.

Posted by flyaflya on 11/27/2008 10:34:54 PM - CST

another bug is in line 11:
if (opts.id == 'undefined') opts.id = $this.attr('id'); should remove comma like this: if (opts.id == undefined) opts.id = $this.attr('id');

Posted by norbert on 12/1/2008 12:21:57 PM - CST

Big thanks! Life with u is much more easier!

Posted by Jarrett on 12/13/2008 12:55:44 AM - CST

I'm testing an updated version 1.1 of the rater plugin. It includes various fixes pointed out above.

Posted by Jarrett on 12/22/2008 9:37:40 AM - CST

I just noticed there are some patches for this plugin on the jQuery site.

Trackback from BlogSvc News on 12/24/2008 12:55:21 PM - CST

Wizard Release 0.8

The eighth release of BlogSvc includes a new setup wizard. Also, this release contains the…

Posted by chosen on 1/4/2009 11:46:49 AM - CST

man, your example is not working for me, I copied the complete code and just change the ID and there is nothing working with it, writing my own now -.-

Trackback from BlogSvc Information on 1/9/2009 4:15:34 PM - CST

Ratings

BlogSvc supports rating entries. Rating count, rating sum, and raters data is stored as…

Posted by Jerry Dean on 1/30/2009 10:29:51 AM - CST

The documentation link is broken, I am trying to install and use BlogService without success.

Posted by ken on 2/2/2009 2:49:04 AM - CST

I successfully used the Rater plugin with my aspx page.
I also did modify some items to postHref in a single aspx using the code behind page load. But I'm having problems when I combine the 2 patches from the jQuery site since I'm new to jQuery. anyone successfully implemented the patch from the jQuery site? -Patch to retrieve both the rating and total rating -Allowing multiple ratings so far with the old code that uses the result variable the code was able to fetch the rating and the total rating, what's the benefit of the patch above?

Posted by ken on 2/2/2009 2:51:00 AM - CST

I successfully used the Rater plugin with my aspx page.

I also did modify some items to postHref in a single aspx using the code behind page load..

But I'm having problems when I combine the 2 patches from the jQuery site since I'm new to jQuery.

Anyone successfully implemented the patch from the jQuery site?.

-Patch to retrieve both the rating and total rating.

-Allowing multiple ratings so far with the old code that uses the result variable.

The code was able to fetch the rating and the total rating, what's the benefit of the patch above?

Posted by Jarrett on 2/2/2009 11:48:45 AM - CST

@ken: the only benefit that fetching the total rating has is that it is more accurate when other rating have occurred between the time the page was loaded and the time the user actually rates. However, this only matters when you have 100's of people rating an entry within a short period of time and you need accuracy.

Posted by ken on 2/5/2009 8:47:51 PM - CST

Okay, thanks Jarret. by the way, maybe you can help me provide some initial thoughts regarding using AJAX for rating vs jSON Query for rating. I'm new to both AJAX and jSON Query and I'm going to apply this using asp .net 2.0.

Posted by Björn on 2/25/2009 3:31:18 AM - CST

Great plugin! Best jQuery Star Rater so far.

Posted by jason on 3/3/2009 4:36:12 PM - CST

wow, after spending all day trying to get one of those other jquery rating plugins to work with multiple ajax rewrites, i finally gave up and searched for something else, which brought me to this. what a lifesaver! thanks man! no problems so far, although my only suggestion would be to build in support for posting to a web service as well as posting to a page. But compared to the other issues i have been dealing with, that should be a pretty easy adjustment for me. thanks again

Posted by Sangam Uprety on 6/22/2009 5:20:52 AM - CST

There are mainly php raters. This one is using jquery with asp.net. And size is also very small. So I like this. I have started playing with this rater plugin. One thing I would like to know is: How to show the tooltips like (poor, average, above average,good, excellent) etc. while hovering over the stars (much like the star rating in this very site!)?
Thank you very much.

Posted by Simon Whitaker on 8/12/2009 7:39:26 AM - CST

Great plug in just what I've been looking for!

Posted by Tomas Matejka on 9/29/2009 11:08:15 AM - CST

I love this script. Thanks a lot for sharing.

Posted by ghprod on 11/5/2009 3:55:20 AM - CST

Hi,
any PHP version? thanks and regards

Posted by Heena on 8/20/2012 12:12:09 AM - CST

I am binding dynamically multiple rate control on a page. I dont get On Hover effect of rate control. Please guide me how to bind multiple rate controls...

Trackback on 4/30/2013 3:59:38 AM - CST

Best 17 JQuery Star Rating Plugins

Trackback on 5/26/2013 6:01:44 PM - CST

20 Powerful Free Star Rating Plugins Coded with jQuery and AJAX

Posted by Sarge on 12/3/2014 1:46:30 PM - CST

Thanks much for the plugin!
Has been working great but you have made a mistake in your code: "var left = e.clientX - $off.offset().left;" - this line should be replaced with "var left = e.pageX - $off.offset().left;" That way the rating will be determined correctly even if you horizontally scroll your page.

jvance.com

.net, c#, asp.net, linq, htpc, woodworking