Jarrett's Tech Blog - For September 2008
-
New jQuery Rater Plugin for Star Ratings
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 DemoFeatures
- 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)
Found this plugin useful? Please kick it -
