AJAX Rating Stars
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)
[...] 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. [...]
I need a better rating system then I have can you help develop it ?
Hi Adam
I’d be glad to lend a hand. Email me your details @ me@beauscott.com
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..
Hi Ayra,
Simply change the
actionURLparameter 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 });Thanks a lot…i was making a mistake in my aspx page…thats y it was not working….
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.
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
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.
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
I guess that would help, thanks alot Beau. I love it.
I’m having issues getting this to work on Safari? Any suggestions?
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?
Is there an easy way to instantiate a stars object and dynamically append it to a DIV?
Oops. Just found the “container” option. Thanks.
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?
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
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
Sorry for the double post… but the “value: ” entry in the “var s3= …” declaration shouldn’t be there.
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.
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.
[...] AJAX-Rating Stars - von beauscott.com [...]
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.
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.
[...] BeauScott.com » Blog Archive » AJAX Rating Stars prototype.jsを使った投票システム (tags: poll rating ajax) [...]
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
Nice code..required for my new project.
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!
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!
i’m trying to use this script but i have got some
pbs.I’m lost. Is it possible to help me. thank you.
Thanks for the widget.
The documentation states that
setValuetakes 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.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
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).
D’oh! It’s been updated and is current now. Thanks for the heads up.
Beau
[...] 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 [...]
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?
[...] AJAX Rating Stars [...]
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?
[...] If you want to read more and download the source follow the link below. http://www.beauscott.com/2006/08/26/ajax-rating-stars/ [...]
[...] AJAX Rating Stars [...]
[...] AJAX Rating Stars [...]
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?
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!
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
Before I install it I must ask can maxRating: be set to 10?
Thanks
Hi there and thank you for this script.
When I see the examples ONLINE everything works great, but then when I download the .zip file containing the same examples, they don’t work locally (OFFLINE).
Could you tell me what could be happening? maybe the .zip file has a different version than the one running online at your site. Expecting your kind reply. Best ragards. Jack
Hi Beau,
I’ve used the rating stars before on a non-profit site and i really like it. What is the license type on this code? May it be used in an application that i am building for a client?
Aimee.
do you have the same rating but with JQuery ?
Hello
i have rating system working properly
i want the code so that
after clicking that stars…
it should show…
what that stars was for…
?plz
I was wondering if there was name for the input that I can use in a send mail form, so that I can post the rating given in an email.
ie $_POST['?']
hey - really sorry, just worked out the bind field
Hi there,
i have a little problem.
When i bind the value to a hiddenfield to submit it with the form i can’t reset the star-value with the setStarValue-method.
Hi Scott
i want to show a message during the rating like poor, good…. can you help me with give some ideas to develop it ?
pls!!!!!
Hi,
is ajax rating control free???
do you need to pay for this control??
Thanks
Hitesh
Hello,
Thanks for your documentation and help. I am implementing the Ajax Star Rater at the moment on my credit evaluation website. My first demo will be online in a few days here:http://www.ratenkredit.org/ratenkredite_test.html
[...] Site | Demo [...]
Hi there,
may i know how to use the ratings?
i cant seem to understand the demo.
where to add those codes?
which images to use?
by the way, im using visual studio for my project