New jQuery Rater Plugin for Star Ratings
Posted in ASP.NET, BlogSvc, C#, jQuery by Jarrett on 9/29/2008 1:37:00 AM - CSTThe 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.
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.
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)
To see a full server implementation, see the source code of AtomSite.
Download jQuery Rater Plugin (javascript + demo html + image + sample server page)
Comments
Posted by DotNetKicks on 9/22/2008 12:01:28 AM - CST
Posted by Daniel on 10/5/2008 9:52:59 PM - CST
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
$('.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
Posted by Dino Baskovic on 11/8/2008 5:30:32 PM - CST
Otherwise, GREAT work here!
Posted by Ian Serlin on 11/13/2008 3:43:16 AM - CST
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
Posted by flyaflya on 11/27/2008 8:49:45 PM - CST
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
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
Posted by Jarrett on 12/13/2008 12:55:44 AM - CST
Posted by Jarrett on 12/22/2008 9:37:40 AM - CST
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
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
Posted by ken on 2/2/2009 2:49:04 AM - CST
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 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
Posted by ken on 2/5/2009 8:47:51 PM - CST
Posted by Björn on 2/25/2009 3:31:18 AM - CST
Posted by jason on 3/3/2009 4:36:12 PM - CST
Posted by Sangam Uprety on 6/22/2009 5:20:52 AM - CST
Thank you very much.
Posted by Simon Whitaker on 8/12/2009 7:39:26 AM - CST
Posted by Tomas Matejka on 9/29/2009 11:08:15 AM - CST
Posted by ghprod on 11/5/2009 3:55:20 AM - CST
any PHP version? thanks and regards
Posted by Heena on 8/20/2012 12:12:09 AM - CST
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
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.