jvance.com

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

Jarrett's Tech Blog - For September 2008

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

    Posted by Jarrett on September 29 at 1:37 AM

© Copyright 2017 Powered by AtomSite 1.3.0.0