Tuesday, May 1st, 2007

Creating an Ajax Rating Widget

Category: Articles

Laurent Haan has taken the time to write a detailed article on Creating an Ajax Rating Widget.

Not only does Laurent take the time to walk through the implementation of a rating widget, but he ports it across Dojo, Prototype, Mootools, and jQuery.

It is interesting to go through the examples in each library and see both the differences, and the similarities. The biggest merging has been around using Selectors to bypass having to use heavy DOM code. We can all be thankful to that.

Frequent visitors of ajax enabled websites, like ajaxian, have all witnessed them already: ajax rating widgets. They are flashy, animated, you can use them to rate the content (usually without refreshing the page) and if you could, you’d present them to your parents and marry them. Compared to the classic rating system, as on IMDb, they incite people to click them, reducing the effective rating process to only one click.

In this tutorial, I want to show you how to create the JavaScript framework to display the animated rating widget and how to connect it to your server backend by using some of the most common Ajax frameworks out there. I clearly separate the page creation from the JavaScript functions and the rating backend, to allow the script to be as flexible as possible and to be easy integrable into your existing website.

This tutorial is not meant to present you with a finished script (even though you could simply copy&paste the end result into your website and make it work without any problems), but rather to explain the design and implementation process that would enable you to create your own widgets if you’d need to.

Posted by Dion Almaer at 7:22 am

4 rating from 229 votes


Comments feed TrackBack URI

I just used the widget from a blackberry and it did’nt register my vote!

Comment by GC — May 1, 2007

The jQuery one can really be shortened to:

$(function() {

$('div.rating/img').click(function(evt) {
var temp = $(evt).attr('id').substr(5);

ratingID: temp.substr(0, temp.indexOf('_')),
starNbr: temp.substr(temp.indexOf('_') + 1)
function(data) {

Comment by Robin — May 1, 2007

The Prototype one could be shortened if they used the 1.5.1 rc release. But I understand its not finalized so oh well.

Comment by j — May 1, 2007

It doesn’t work on IE6

Comment by Gronky — May 1, 2007

@GC: As you might have noticed while reading the tutorial, the server backend is up to the reader to complete. The PHP code in the tutorial does nothing but read the two GET values and echo a text message back without connecting to any database. The two values you receive in the script though are all you need to update the database.

@Robin: I understand that I could have shortened the code even more if I had used anonymous functions and merged the code into one block. I decided not to do so and keep the original code structure to better display the differences between the frameworks to complete the same task.

@Gronky: “It doesn’t work” is a very vague comment and doesn’t contain any useful information. I am more than willing to update my code if it should be incompatible with any browser version but you have to tell me what code doesn’t work and for what framework.

Comment by Laurent Haan — May 2, 2007

Hi guys,
You can also try the Spotback ‘Rate Everything’ widget. It’s a pretty cool widget that not only rates the items but also provides your users with personal recommendations containing other items from your site.
What’s also nice about it, is that you can design you own widget to fit with your site’s design. Try this link http://spotback.com/widgets/intro Enjoy!

Comment by Daniel — May 2, 2007

Hello Laurent,

Please let your readers know about JS-Kit.

We have a free, *highly* customizable ratings widget that
is installed with just two lines of HTML. http://js-kit.com/ratings

We also have a Polls, Comment, and Rate + Comment widget too!




Comment by Khris — May 3, 2007

@Laurent: True, but one of the main features of jQuery (and why I prefer it over most other libraries) is that code can be compacted with anonymous functions and their magical $() that they took from Prototype and made all-powerful. This would be the difference between the libraries’ approaches that you want to show :).

Comment by Robin — May 4, 2007

It’s another free Ajax based rating and reviews system: http://www.rating-system.com

Comment by JohnQ — November 13, 2007

Leave a comment

You must be logged in to post a comment.