For a new project I'm working on, I will need a mechanism for users to vote on certain pieces of content. Now it turns out that there are a billion and one ways of doing this, with an additional billion sets of frameworks. I was quite overwhelmed by the number of choices, so I've been putting it off for a while now.

Yet fortuitously, a couple days ago I was browsing the Spry docs and noticed two very promising words: Rating Widget.

Surely this cannot be what I'm looking for, could it? Ah but it was!

Recently, Spry updated its growing library of widgets to include a standard "star" rating system. Like it's other widgets, the rating widget comes with a single css file and a single javascript file. And also like other Spry widgets, it is completely simple to implement.

Assuming you have referenced the css and javascript files correctly, here's all it takes to set up a star rating system:

<span id="myrating" class="ratingContainer">

        <span class="ratingButton"></span>
        <span class="ratingButton"></span>
        <span class="ratingButton"></span>
        <span class="ratingButton"></span>
        <span class="ratingButton"></span>
        <input type="text" id="ratingValue" name="dynamic_rate"/>
        <span class="ratingRatedMsg">Thanks for voting !</span>
    </span>

It's so simple it's almost laughable. But it gets much better. Like all things Spry, this widget makes it incredibly easy to connect with other files that might handle server-side processing (such as computing the new average of votes based on user's selection). To do this, you just add an additional parameter to the widget that specifies the file that will be doing the processing, as well as any arguments that need to be sent along. Spry takes care of the rest. Oh, and there is also a handy parameter ('afterRating") that allows you to easily update the widget with the returned value from the original request, all completely asynchronously. And here's that:

var rate = new Spry.Widget.Rating("myrating", {ratingValue:2, afterRating:'serverValue', saveUrl: "rating.cfc?method=returnAverage",postData:"id=myrating&rating=@@ratingValue@@"});

Here, I simply instantiate a new widget, set a default rating "average" (2), specify the 'afterRating' to get the returned serverValue, and setup my url fetch with appropriate arguments. Absolute cake!

Check out an extremely stripped down version of all that the Spry rating widget is capable of doing.

Oh, and tomorrow I will follow up on this regarding how we move this already cool widget to full-on unobtrusiveness.