I'm a big fan of website statistics. I examine my own daily and very carefully to see how people are finding my blog. The vast majority of my traffic is from organic search and is relevant to articles I have, however, the last couple of weeks I've noticed multiple searches similar to "ajax mvc3 rating system". Given that someone really wants to find an AJAX ready rating system I decided to write one as a jquery plugin. I'm going to explain how I did it and give you the code to produce raters like this:
My goals were:
1. Needs to be pretty light without a lot of bloat.
2. Flexible design to allow changes on a per-rater basis.
3. Themeable to allow custom rating icons.
4. Callback friendly for use with AJAX requests.
5. Easy (and automated) to implement.
The list of goals was both pretty short and pretty easy to fulfill. The design is simple. The system uses 3 divs, a single image and a stylesheet. The stylesheet itself isn't absolutely necessary but I decided to include it to add a bit of flexibility. Only a single div is needed by the user to make the rater operate. In fact, only three steps have to be taken in order to use the rater:
1. Include a reference to the jquery.jqRater.js file.
2. Add a div with the "jqRater" class.
3. Call the $().jqRater("init") method to generate raters on the page.
The rater itself initializes with default options unless they are overridden. The stylesheet and icons are automatically loaded by the plugin. The icon itself is a PNG with transparency. I started by creating a 30w x 20h image and drawing a star. I then erased all of the content from the inside of the star to make it transparent. The transparent star is then used as the background image for a div and tiled horizontally. That div is then shifted up to cover another div. The div being covered uses a background color and width to make the stars appear to be filled.
While my image is 30px by 20px, that isn't a size requirement. Based on the selected theme, jqRater downloads the "icon.png" image from the theme folder and automatically determines width and height needed for calculations.
The following options can be overridden in the "init" method call:
maxrating: determines the number of stars (or whatever icon you use) will be displayed. Default is 5.
theme: folder name of theme. Spaces are automatically converted to underscores. Default is "stars".
fillcolor: determines the color of active stars. Default is "#ffff00" (yellow).
emptycolor: sets the color of inactive stars. Default is "#ccc" (grey).
selectmode: valid values are "whole" or "half". Determines whether ratings are done in half or full star increments.
oninitialized: If populated with a function, callback that's executed when initialization is complete.
onratingset: If populated with a function, callback that's executed when a rating is set.
The default initial rating for each "rater" is 0. Some settings can be overridden on a per-rater basis. There are a couple of different ways this can be accomplished. Many scripts use the $.data() functionality of jQuery to store data, however using data- attributes seemed more natural. All that's required to create a rater is to create an element that supports nested divs and give it a class of "jqRater" like so:
<div class="jqRater"></div>
You may want to set some additional options though. The following options are supported on a per-rater basis:
data-rating: sets the initial rating for a specific rater. If dynamically generating HTML this would allow you to specify the starting value.
data-fillcolor: sets the fill color used for that specific rater.
data-emptycolor: sets the empty star color for that specific rater.
data-maxrating: allows the specific rater to have more or less "stars" than other raters on the page.
Overriding the values is also simple. To change the fill color for a rater to a blue, which simply changes the background color of the div behind the stars, we specify the data-fillcolor attribute as follows:
<div class="jqRater" data-fillcolor="#000099"></div>
While I could spend a day blogging about all of the different combinations of ways you can use the rating system it's easier if you just snag a copy and take a look. I've zipped up jqRater (unminified) and some basic html demos to show you how to implement it (it really is super easy). Demo #2 shows how to configure different options for the rater as well as how to handle the oninitialized and onratingset events. The onratingset event takes a single data parameter with two properties: rating, and previousrating. In the context of the event handler, 'this' refers to the rater itself as a jquery object, so if you've stored your own custom attributes, such as data-prodid, you can easily access them from within the callback by simply saying: this.attr('data-prodid').
Feel free to use this library as you wish and/or make any modifications and enhancements to it. If you do add something really cool (or find a bug) please contact me and let me know. I'd love to share it with the community.
DOWNLOAD jqRATER