Star Rating Plugin for jQuery

Posted in October 29, 2009 ¬ 8:57 amh.Chris Richards17 Comments »

What

An easy to use rating control. It takes a normal select box, and turns it into a rating that your users can click on. The select box is preserved so you can still bind on change, get, and set the value in the rating control. The image is controlled with CSS and a simple gif, so you can make it look like anything you need.

Download

Download (Moved to GitHub)
Download

Example

Here is a sample default rating control with no options.

Source

<select class="rating">
    <option value="0">Did not like</option>
    <option value="1">Ok</option>
    <option value="2" selected="selected">Liked</option>
    <option value="3">Loved!</option>
</select>

$(".rating").rating();

That’s it!

The select box is now replaced with the rating control. Each option you put in the select box is turned into a star, so you can easily have as many stars as you want. The value you set is the value that is returned for the selected star. The text becomes the title on the star.

You can turn the cancel button on and off, and change the value of the cancel button by passing it when you create the rating control.
$(".rating").rating({showCancel: true, cancelValue: null,})

You can make the control readonly by setting <select disabled="disabled">

Available Options:

  • showCancel: true : Should the cancel button be shown?
  • cancelValue: null : If cancel button is shown, what should it’s value be?
  • startValue: null : If no property has the ’selected’ attribute, what value should be displayed?

Get Value

Click for Value

Source

<select name="myRating" class="rating" id="serialStar">
    <option value="0">Did not like</option>
    <option value="1">Ok</option>
    <option value="2">Liked</option>
    <option value="3">Loved!</option>
</select>
<span id="seralString">Click for Value</span>
<button onclick="$('#seralString').text( $('#serialStar').val() );">Serialize</button>

//Turn the Select into a rating
$(".rating").rating();
//Action on button click
$('#seralString').text( $('#serialStar').val() );

Bind $.serialize() On Change

Of course you don’t have to call $.serialize() here, you can call anything you want. It’s just a normal event. You even have access to the value with $("#serialStar2").val()!

Just click and I’ll change.

Source

<select name="myRating" class="rating" id="serialStar2">
    <option value="1">ALrighte</option>
    <option value="2">Ok</option>
    <option value="3">Getting Better</option>
    <option value="4">Pretty Good</option>
	<option value="5">Awesome</option>
</select>
<span id="serialString2">serialize that star rating!</span>

//Turn the select box into rating controls
$(".rating").rating();

//Show that we can bind on the select box
$("#serialStar2").bind("change", function(){
	$('#serialString2').text( $('#serialStar2').serialize() );
});

Setting the Value

There is one slight twist. In order to set the value programmatically, you have to set it, then trigger the change event on the select box.

<select name="myRating" class="rating" id="serialStar2">
    <option value="1">ALrighte</option>
    <option value="2">Ok</option>
    <option value="3">Getting Better</option>
    <option value="4">Pretty Good</option>
	<option value="5">Awesome</option>
</select>
<button onclick="$('#star3').val(4).change()"&gtSet to 'Pretty Good'</button&gt

//Turn the select box into rating controls
$(".rating").rating();

//Set the value to 4, then trigger change to update the rating.
$('#star3').val(4).change();

Bugfixes

  • IE Loading Problems
  • IE CSS Hover Over shows the wrong image

Todo

  • Allow disabling of the control
  • Allow global settings
  • Way to set the value without firing the change event
  • If no selected attribute is present, start with all stars blank
  • Share/Bookmark
Code,

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

17 Comments »

 
  • Mav says:
    November 1, 2009 at 6:58 am

    I’ve been trying unsuccesfully to get a star rating to work in a FancyBox pop-up that loads an embedded video with a star rating via ajax. So far no luck since all seem to break on dynamically added code. I found this via http://wiki.jqueryui.com/StarRating so I thought this one might do the trick. Haven’t gotten that far yet, but I do have some thoughts:

    The thing with a select box with options is that by default the first item is always selected, which means the first star is always full upon loading. Perhaps it’s possible to put something in the options that by default none are filled? That’s my preference, I guess others might want to fill it to what’s currently the votes average.

    I also can’t seem to disable the cancel button, I noticed it’s in the options like this:
    $.fn.rating = function(options)
    {
    var settings =
    {
    showCancel: true,
    cancelValue: null,
    };
    I’m more of a PHP guy, javascript is like chinese to me so I have no idea how to set these values on $(document).ready because they’re inside the settings var. Also, imho it seems unnecessary to have settings inside options? I mean this seems more logical:
    //in custom script on $(document).ready
    $.fn.rating.options = { showCancel: false };
    //in jquery.ratings.js
    $.fn.rating.options = {
    showCancel: true,
    cancelValue: null,
    //etc...    That’s how one of the many other ratings scripts I’ve tried did it.

  • Chris Richards says:
    November 3, 2009 at 8:34 am

    If you can give me more information as to your problem I will try and help. An example would be best. I did just fix some IE 8 issues, so if your problem was in IE 8 redownload the file and try the new version.

    As for disabling the cancel button, all you need to do is this:

    $(document).ready(function(){
    //This is where you can turn on or off the cancel button
    $(".rating").rating({showCancel: false});
});

    Passing options when you create the controls is a jQuery standard practice. In the source the var settings are the default settings that you can override by passing the option when you create the control.

    I will add the option to start with all the stars blank soon.
    Thanks for your comment!

  • Mav says:
    November 4, 2009 at 8:04 am

    I’d show our testpage but since were testing on the live server because of the videos/database I’d rather not link to it here. But I got it to work in the ajax popup using .live instead of .bind like this:
    $("#serialStar2").live("change", function(){
    $('#serialString2').text( $('#serialStar2').serialize() );
    });
    So pretty much everything works now except for the first star being filled by default. IE8 did throw an error, I’ll be sure to get the updated script. And thanks for your work on this! I hope this will eventually be included into jquery UI since we’re already using parts of that already.

    About the settings thing (I guess that should be called defaults indeed :) , I meant for a way to set those options one time, not for every creation. I figured since the options code looks so much like another plugin where setting the defaults once was possible, it should be possible with this plugin too? The popup we’re using has a “callbackOnShow” that runs the $(“.rating”).rating({showCancel: false}); line, I’m assuming less code in there and more set as defaults the better. Might not make much of a difference though, but that’s why I was asking. :)

    Is there a better way of getting the two needed variables (select name & vote#)other than serializing it? Because that gives me something like: “video_003=4″ which I’ll have to split up again before I can work with the two values. Seems like the serializing is for testing/showing purposes. Sorry to ask here, I’m guessing it’s probably something very simple but I couldn’t figure that one out. JS is so not my thing, the whole PHP back-end stuff will be peanuts.

  • Chris Richards says:
    November 4, 2009 at 8:55 am

    I understand now! Being able to globally change the settings/defaults is a good idea, I’ll add it to my TODO list.

    I just updated the control this morning which turns off all stars unless your select box has a “selected” attribute. I think this is what you wanted.

    If the jQuery serialize isn’t quite doing it for you, you can try my serializeForm plugin You use it on a containing element and it turns all of the input elements (including the rating control) into a JSON object that can be passed back to the server with $.post(url, JSON, callBack) I created the plugin for my ASP.NET work.

    In one of my production environments I put the rating into a ASP.NET control and this is the JS I use. I thought it might help with your situation. I use .bind() but .live() is great too. 

    $(".rating")
	.rating({"showCancel": false})
	.bind("change", function(){
		//Post the value back with ajax
		$.post("< %= Request.Url.LocalPath %>?ajax_control=true&action=click",
				{"tag_name":"< %= this.TagName %>", value: $("#< %= this.ID %>").val()},
				function(xml){
					//User Click complete, show the average
					$("#< %= this.ID %>_avg").html(xml);
				}
		);
	});
  • Mav says:
    November 7, 2009 at 2:33 pm

    Yes, exactly what I wanted. It now works with all stars off, and I like that it’s using the selected attribute if you do want to show any stars filled. In Chrome, Firefox and Opera it all works, but I tried it in msIE and it shows the first star filled. (I’m using IE7 though, haven’t updated it in a while. So it might be working in IE8?)

  • charly says:
    November 7, 2009 at 5:53 pm

    hi! finally a JQuery star plugin I could get to work :) Even it worked fine with a callback to a php, posting to a DB. Excellent. Thanks it’s great!

    Two things:
    1) About IE, I have IE8 and it seems to work fine in compatibility mode; it is readonly in standard mode. IE anyway didn’t to work for me with other similar plugins..
    2) Would be nice to have a readonly ability. I’m really thinking how to go about this control when users are not logged in. Readonly might be the solution.. or else any idea may help!

  • Mav says:
    November 8, 2009 at 10:58 am

    Charly: As for point 2, I’m also showing only the results to guests, and only let members actually vote. The voting part is in a popup and remembers the member’s vote if they open it again. And results are shown on the main page where voting is not possible. The way I’m thinking of showing that is just completely leave the form out of it, and use a simple list for displaying the current average. That way it’s also possible to show percentages of stars.
    I’ve tested it so far with this code, which works with the star.gif from this plugin. The CSS part:
    ul.showstars {
    position: relative;
    float:left;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 80px;
    height: 16px;
    background: url('star.gif') left -32px repeat-x;
    }
    ul.showstars li {
    position: absolute;
    float: left;
    display: block;
    width: 85px;
    height: 16px;
    font-size: 1px;
    }
    ul.showstars li.curr {
    background: url('star.gif') left 0;
    }
    div.staravg {
    position: relative;
    float: left;
    left: 5px;
    }
    And the HTML part:

    90%
    To get the proper px width from a percentage in PHP it's probably something like round(90*79/100);. Or (percentage * {total width of all stars-1px} / 100), the minus 1px seems to work a little better with round() but you'll have to set it to 80px when the percentage is 100%. Hope this helps. :)

  • Mav says:
    November 8, 2009 at 11:03 am

    Looks like the code-tag doesn’t work properly with html tags in the comments, so here’s the html part on pastebin.

  • cute says:
    November 16, 2009 at 9:17 pm

    how can I get the value?
    I want to save the value in variabel..
    I work with PHP…

    thx,,,
    sorry, my English isn’t good..

  • Jeff says:
    November 18, 2009 at 3:56 am

    You can get the variable by including:

    $(‘#serialStar’).val()

    in your script and then send that to a php page either through ajax or merely using the javascript window.href function to load another page with the variable as a get or post parameter.

  • cute says:
    November 20, 2009 at 8:33 am

    thanks..
    I have finished it..
    But I have another problems..
    I only want to show the rating, people can’t hover and set the rating.
    Can this js do it? And how?

  • Chris Richards says:
    November 23, 2009 at 10:21 am

    You can now make it read only by setting the select box to disabled like so: <select disabled=”disabled”>

  • Sough says:
    December 4, 2009 at 3:59 pm

    Hello, first nice work.

    But i have a problem with IE8, maybe you can help me.

    I think the IE8 ignore the following:

    if( 0 !== $("#" + id + " option[selected]").size() )
    {
    //Set the Starting Value
    events.setValue( $(selectBox).val(), div, selectBox );
    } else {

    After I send my formular (with a for-loop i create the button and set selected to the one, which I have choosen before) the IE8 ignore the selected. Also if I try to set select without a loop.

    With Opera, FF and older IE Versions (6, 7) and it works without any problems.

    I hope you understand what I mean (my english isn’t very well).

    Thanks for ervery help.

  • BEO says:
    December 6, 2009 at 7:19 am

    I want that users are only once able to vote. How can I supply?

    $(this).attr(‘disabled’, ‘disabled’);

    doesn’t work.

  • Los says:
    January 12, 2010 at 3:13 pm

    Hello! I can’t seem to get the stars selected in IE8. It works fine in FF and Chrome. View source shows that the star is selected but the stars won’t light up in IE8. Anyone else have this problem?

  • Alex says:
    January 28, 2010 at 8:33 am

    Is it possible to display half a star like for instance 4.5 or 3.5 ?

  • dante says:
    February 1, 2010 at 9:12 am

    The issue with IE8 can be solved by following fix:

    …
    if( 0 !== $(“#” + id + ” option:selected“).size() )
    {
    …

 

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

CommentLuv Enabled