jvance.com

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

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

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.

SetupPlugin

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.net.

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

Found this plugin useful? Please kick it - kick it on DotNetKicks.com

Comments

Gravatar
Posted by DotNetKicks on 9/22/2008 12:01:28 AM - CST
You've been kicked! A good thing.
Gravatar
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
Gravatar
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
Gravatar
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.
Gravatar
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!
Gravatar
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
Gravatar
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
Gravatar
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.
Gravatar
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');
Gravatar
Posted by norbert on 12/1/2008 12:21:57 PM - CST
Big thanks! Life with u is much more easier!
Gravatar
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.
Gravatar
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…
Gravatar
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…
Gravatar
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.
Gravatar
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?
Gravatar
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?
Gravatar
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.
Gravatar
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.
Gravatar
Posted by Björn on 2/25/2009 3:31:18 AM - CST
Great plugin! Best jQuery Star Rater so far.
Gravatar
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
Gravatar
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.
Gravatar
Posted by Simon Whitaker on 8/12/2009 7:39:26 AM - CST
Great plug in just what I've been looking for!
Gravatar
Posted by Tomas Matejka on 9/29/2009 11:08:15 AM - CST
I love this script. Thanks a lot for sharing.
Gravatar
Posted by ghprod on 11/5/2009 3:55:20 AM - CST
Hi,
any PHP version? thanks and regards

Add Comment

Login using
Google Yahoo flickr AOL
and more
Or provide your details
Please enter your name. Please enter a valid email. Please enter a valid website.
Please supply a comment.
3.9 (804)
on 1/24/2010 12:10:41 AM - CST

Recent Entries

© Copyright 2014 Powered by AtomSite 1.3.0.0