AJAX Rating Stars

August 26th, 2006

Today I bring to you the second installment to my fledgling widgets library (which, by the way, I intend to packages together when I get enough components): AJAX Rating Stars. You have probably seen examples of these used all over (like Netflix), and I recently had the need to make some for a personal project. So I figure, if I could use them, you might want to as well.

Again, I’ve chosen the prototype.js javascript framework as the basis of this widget. These stars feature form-field binding, javascript callback support and AJAX posting for easy ratings.

Click here for usage examples and API documentation.

Click here to download this widget. (zip, 7kb)

Posted by Beau
Filed in AJAX, Development, JavaScript, Widgets

44 Responses to “AJAX Rating Stars”

  1. AJAX Resources » AJAX Rating Stars Says:
    August 28th, 2006 at 11:52 pm

    [...] I’ve completed the second component to my prototype-based AJAX widgets library: AJAX Rating Stars. This component features form-field binding, javascript callback support, and sending values via AJAX requests. [...]

  2. adam reiser Says:
    September 1st, 2006 at 1:58 am

    I need a better rating system then I have can you help develop it ?

  3. Beau Says:
    September 1st, 2006 at 6:05 pm

    Hi Adam :)

    I’d be glad to lend a hand. Email me your details @ me@beauscott.com

  4. Arya Says:
    September 7th, 2006 at 6:06 am

    Hi,

    A really good one… I wanted to implement this in ASP.net. How to Save record in ASP.net..I m using rating.aspx instead of .php file which is mentioned there…but i also want to pass two user ids ForUser and By User along with the rating…how to do that….

    Thanks in advance.. :)

  5. Beau Says:
    September 7th, 2006 at 8:58 am

    Hi Ayra,

    Simply change the actionURL parameter to reflect the url you want to send the information to.

    For Example:

    var s = new Stars({
    maxRating: 5,
    actionURL: 'rate.aspx?ForUser=234&ByUser=2311&rating=',
    callback: ajaxRating
});
  6. Arya Says:
    September 8th, 2006 at 6:41 am

    Thanks a lot…i was making a mistake in my aspx page…thats y it was not working….

  7. Omur Says:
    September 15th, 2006 at 3:11 am

    Hi Beau, I liked your script. But it isnt worked at my php page. Please help me. Omuricq@hotmail.com (msn) I want youtube’s vote system.

  8. Arya Says:
    October 3rd, 2006 at 2:32 am

    hi,

    This script is working perfactly except the page is not getting refreshed so i have to press refresh button of the browser to see the rating effect

  9. BillyG Says:
    October 10th, 2006 at 8:07 am

    Hi. I’ve insured I have the latest Prototype and the stars are displaying on my site, but they do not change display, even after a manual page refresh.

    If you get the chance, I would really appreciate some guidance on this so I can further tweak it from there.

    TIA.

  10. Beau Says:
    October 10th, 2006 at 4:37 pm

    BillG,

    I’m assuming your example is on the website you have linked? (http://www.billy-girlardo.com/)

    It looks like stars.js is not on your server, or at least to the directory your referencing on your page. (link: http://www.billy-girlardo.com/stars.js)

    Beau

  11. BillyG Says:
    October 11th, 2006 at 5:07 am

    I guess that would help, thanks alot Beau. I love it.

  12. CTM Says:
    October 23rd, 2006 at 12:38 pm

    I’m having issues getting this to work on Safari? Any suggestions?

  13. Beau Says:
    October 23rd, 2006 at 1:14 pm

    Right now I don’t have any access to a Mac with Safari on it to do some debugging. Anyone know of a VM for PC that allows MacOS X installations?

  14. kb Says:
    November 3rd, 2006 at 1:33 pm

    Is there an easy way to instantiate a stars object and dynamically append it to a DIV?

  15. kb Says:
    November 3rd, 2006 at 1:44 pm

    Oops. Just found the “container” option. Thanks.

  16. Jim Says:
    December 20th, 2006 at 9:57 am

    I have modified your nice example to work on my site. But everything works fine in Non IE browsers, but IE6/7 are choking on a bit of code in the prototype.js file around the respondToReadyState function @708.

    Any ideas?

  17. Beau Says:
    December 20th, 2006 at 4:51 pm

    Hi Jim,

    I took a look at your site (http://www.wiihaveaproblem.com) and noticed that you have a trailing comma in your instantiation options object. FF handles this fine, but IE chokes.

    Beau

  18. Chaos Says:
    January 6th, 2007 at 9:24 am

    Hey Beau,

    Thanks for an awesome api. I’ve got it working on my local site I’m building. I just had a question about the AJAX usage.

    Basically what I want to do is display a blank 5 star bar to allow the user to rate an item, but after the user rates it, I want to display the updated average rating.

    This is the code:

    function ajaxRating(xml)
    {
    var x = xml.responseXML;
    var xmlRating = x.getElementsByTagName(’rating’);
    var rating = xmlRating[0].firstChild.nodeValue;
    s3.value = rating;
    s3.locked = true;
    }
    var s3 = new Stars({
    maxRating: 5,
    actionURL: ‘rate.php?id=item_id&rating=’,
    callback: ajaxRating,
    imagePath: ‘images/’,
    value:
    });

    rate.php updates my database and returns the updated average rating as the ‘rating’ variable. This doesn’t produce what I want. Instead it displays the gold stars which reflect the rating the user gave. If I try to create a whole new display of stars, the page hangs.

    Any ideas or tips? Or is what I’m trying to do incompatible with the API?

    Thanks a lot :)

  19. Chaos Says:
    January 6th, 2007 at 9:26 am

    Sorry for the double post… but the “value: ” entry in the “var s3= …” declaration shouldn’t be there.

  20. Joe Says:
    January 8th, 2007 at 6:50 pm

    Hi piczo is useing this script look http://pic4.piczo.com/js/lib/DynamicRatingStars/1-0-0/stars.js
    piczo is the fastest growing online busines in the uk ever your script must be good if they are useing it normaly ifort they code all ther own stuff but they must of liked your script that much to not bother any ways just fort id say if you dont unready no. :)

  21. george Says:
    January 15th, 2007 at 8:31 pm

    Would like to get this working on Safari. Has anyone been able to modify it so it works? I’ve got too many mac users complaining, and don’t want to switch over to another rating system since this one works so well.

  22. AJAX Portal.de » Blog Archiv » Star-Rating Form Says:
    February 19th, 2007 at 1:37 pm

    [...] AJAX-Rating Stars - von beauscott.com [...]

  23. Alex Says:
    February 23rd, 2007 at 9:13 am

    It works on the nightly builds of Safari, so it must have been a Safari issue.. Still I need to find a fix for current Safari before I can use this… Ill see what I can find, but cant promise anything, as my JS skills are intermediate at best.

  24. Alex Says:
    February 23rd, 2007 at 10:04 am

    OK, here is my situation. have a site where people can view rental properties, and rate them. What I want is to have a “My favs” list on the sidebar, that will show the top 5. This list will have the 5 star rating bar beside the property name as well as the main star rating system in the properties description. So I need to tie the 2 star raters on the page together. I figured I would have the sidebar stars fire a mainstars.setvalue = x in the sidebarstars callback. but since set value triggers the call back for the mainstars we would end up with a loop.

    Is there a way to update one set of stars without triggering the callback, so I can tie 2 together like this??

    Thanks.

  25. links for 2007-04-14 « test Says:
    April 13th, 2007 at 9:36 pm

    [...] BeauScott.com » Blog Archive » AJAX Rating Stars prototype.jsを使った投票システム (tags: poll rating ajax) [...]

  26. Sergei Says:
    May 7th, 2007 at 9:12 pm

    Work around for Safari is very simple - use document.createElement(”img”) instead of new Image().

    See http://evan.livejournal.com/817763.html for more details.

    I got it running on Safari, great library thanks.
    S.R.
    s_r@prowss.com

  27. Yash Says:
    June 24th, 2007 at 11:33 am

    Nice code..required for my new project.

  28. OlegEF Says:
    July 16th, 2007 at 9:40 am

    Hi Beau,

    thank u for script. I have one little problem. There are several ratings on one page, but after clicking locks only the last one. How to fix it?

    thanks in advance!

  29. wesley Says:
    July 30th, 2007 at 1:44 am

    Hello,

    Thanks a lot for a very nice script! I do have a few questions which would make the script perfect for my site.

    1) is it possible to, when the user clicks. There shows up a text message: ‘Thanks for your vote’ ?

    2) when you hover over the stars there comes a different text message under the stars for every score, like ‘Love it’, ‘It’s OK’, ‘Hate it’ such as yahoo videos

    See the script in action: http://www.bmxaction.net/item/top-myspace

    Thanks!

  30. kouly Says:
    October 17th, 2007 at 5:07 am

    i’m trying to use this script but i have got some
    pbs.I’m lost. Is it possible to help me. thank you.

  31. Henrik N Says:
    November 5th, 2007 at 8:17 am

    Thanks for the widget.

    The documentation states that setValue takes a boolean that decides whether to trigger the callback, but this does not work (it’s always triggered), and looking at the code, it seems that there simply isn’t any handling of such a boolean.

  32. Beau Says:
    November 5th, 2007 at 9:08 am

    It does work, and there is support (lines 168 and 173). In order to support optional parameters JavaScript doesn’t require all method parameters to be defined in the method definition. The ‘arguments’ array contains all parameters passed in, so arguments[1] is the optional Boolean value for this method.

    I’ve added an example for external interfacing into the documentation.
    http://www.beauscott.com/examples/RatingStars

    Beau

  33. Henrik N Says:
    November 5th, 2007 at 9:19 am

    Thanks for the reply.

    Ah, I see it is indeed in the stars.js you use on your examples page,
    but it’s not in the stars.js inside
    http://beauscott.com/examples/RatingStars/RatingStars.zip which is the
    one I’m using (and the one linked from this blog post).

  34. Beau Says:
    November 5th, 2007 at 9:23 am

    D’oh! It’s been updated and is current now. Thanks for the heads up.

    Beau

  35. MyChores Journal » Blog Archive » Quick-change importance Says:
    December 8th, 2007 at 6:16 am

    [...] the stars. Just as if it were a rating star on youtube, or something like that. Many thanks to BeautScott.com for the widget, which uses scriptaculous and AJAX and is surprisingly fast to render and use, even [...]

  36. hot Says:
    December 23rd, 2007 at 9:01 am

    I just can’t setup this sistem to work.
    Trying and trying but can’t :(
    Stars are displeys and after click they sowrating in yellow color but after reload page everyting back on begins positions.
    So wotes don’t record anywere…
    Did this sistem need database to work?

  37. Webmaster 38 » Blog Archive » AJAX Rating Stars at ajax scripts compound Says:
    January 3rd, 2008 at 7:16 pm

    [...] AJAX Rating Stars [...]

  38. Hasan Says:
    January 21st, 2008 at 12:43 pm

    Please tell me, I have picture gallery, and I want people to rate each picture? I found WP-starrattings plugin, but it only does for individual post/page. what I want to try to do is (withing one page/post) several pictures, and each has own rating underneath, so that people can rat individual picture?

  39. AJAX Rating Stars « AJAX Crawler - Collection of DHTML and AJAX Samples. Says:
    February 7th, 2008 at 3:01 am

    [...] If you want to read more and download the source follow the link below. http://www.beauscott.com/2006/08/26/ajax-rating-stars/ [...]

  40. CSSgallery.info » CSS and Ajax rating scripts Says:
    February 10th, 2008 at 4:46 pm

    [...] AJAX Rating Stars [...]

  41. CSS and Ajax rating scripts Says:
    February 11th, 2008 at 2:07 am

    [...] AJAX Rating Stars [...]

  42. Caio Iglesias Says:
    May 7th, 2008 at 7:11 pm

    When the rating already has a default value, let’s say four out of five red stars, the fifth one doesn’t show. If I rate it four stars, it then shows four yellow stars and a white one after the yellow ones. It also happens on your examples. Is there a quick fix for this?

  43. Chris Says:
    June 24th, 2008 at 2:20 pm

    Hi Beau,

    Same problem here as Caio above. Any ideas of how to fix this? See the AJAX example on your page for an example of the problem.

    thanks for the great script… it has saved me a ton of time… just need to fix that little bug!

  44. Chris Says:
    June 24th, 2008 at 2:33 pm

    Sorry for double-posting… I answered my own question. It’s because “star-ps-empty.gif” is a blank image - I presume this was by design! For info of others… to fix, just copy star-empty.gif over star-ps-empty.gif.

    Thanks again Beau

Leave a Reply