Unobtrusive AJAX Star Rating Bar
What It Is
This is a rating bar script done with PHP and mySQL that allows users to rate things like can be done on Netflix or Amazon, all web 2.0-like with no page refresh. It is a major improvement on the previous version because it is now unobtrusive, meaning that if Javascript is off it will still work (although the page will refresh). You can also set the number of rating units you want to use (i.e. 4 stars, 5 stars, or 10 stars) on a rater to rater basis (see samples below or read the docs). A few other changes were made as well – see the docs for details. Note that this script isn’t tied to any specific system (such as WordPress), so you should be able to adapt it to your situation without too much trouble. What are you waiting for? Check the demos.
Based on work found at Komodo Media and Climax Designs. There is also another AJAX version of a rater on this page: Yvo Schaap
Good people of the Internet: This work is licensed under a Creative Commons Attribution 3.0 License. Please give credit where it is due, whether it is to me or the people upon whose work I based this script, and don’t claim this work as your own! Please consider making a donation – even $0.50 or a buck. That would be so freaking cool of you. Donate button located below.
If you have any problems downloading the file, first make sure you don’t have any over-crazy firewall protection on. When you can’t grab the file that is USUALLY the culprit. And you have to download it from this domain. I don’t like direct links from other sites. If that doesn’t work, .
Whatchoo Talkin’ ‘Bout
v 1.2.2 Updates (March 18, 2007):
Sorry for the quick release between version 1.2.1 and version 1.2.2. I needed to update the script this page was actually using (it was still using the oldest version) because someone kept farting around with the ratings here. Hopefully, that won’t happen now that this page is using the newest version of the script. Also, because I’m running this site with Wordpress, I found it was a pain in the arse to go in and change the DB queries manually, so I just altered the script to work with Wordpress out of the box by changing what needed to be changed.
- Added: prefixed DB calls with $rating_dbname for better separation from other scripts. This will really help with Wordpress installs – As of 1.2.2 – I don’t think you need to do any special tweaks any longer.
- Updated: changed some variable names so as not to confuse with other scripts
Notes
Basic changes, modifications, and answers to common questions. I will move all changes, modifications, and general advice to the forums, where they belong. (The forums are NOT live right now, but coming soon…)
With a Little Help From My Friends
HEY MONKEYBOY. YEAH, YOU. One very good reason that I DO NOT offer tech support on this script, offer CSS lessons, teach HTML, or give anyone any idea how to fix this silly thing in IE 6 – all things that google is so good at if you know how to type, is because I make next to nothing on this script.
I spent a lot of spare time polishing this thing up and trying to make it more useful. If the late nights I spent tearing my hair out trying to determine why Internet Explorer won’t allow dynamic insertion of an “onclick“ into a link using setAttribute has saved you any time at all, or if you just think it looks purty, consider a little donation. C’mon, you know there must be a couple bucks just sitting in your PayPal account that you’ve forgotten about!
If you come up with anything more interesting or better developed than what I have here, you’ll have to drop a line in the forums (which, I’m telling you, are coming soon). Suggestions are welcome and information about vulnerabilities or egregious violations of PHP best practices is most welcome as well – just be nice. And remember, spread some good karma: donate today!
Whither Wall of Fame & Live Samples?
These have been quietly removed. All I got was an inbox full of needy people looking for linkage to their site, that may or may not have been shoddy, and may or may not have actually used the rater in such a way that it looked good. There was way more noise than signal there, and I didn’t need the headache. Thanks to everyone who has donated in the past, and will donate in the future. It’s much appreciated!
Demos
Comments are closed for the Star Rater!
Sorry, but comments have been closed for this script. You can now read all about it (and post your questions and advice) in the forums! (Coming VERY soon...) Pretty much all the info you need to fix or upgrade the Star Rater version 1.1 is found in the existing comments. And again, sorry if you feel like you're getting dissed, but I can't offer help on this script. I just can't. I can't give lessons in CSS, either. I may be able to pop in on the forums from time to time. Thanks for your understanding.
300 Comments
Sorry, comments are closed.
January 23rd, 2007
@berge and @pete,
I was having the same exact problem as you. I found that in my instance the problem was caused when using Navicat to enter in my values into the DB. So instead I used the following statement to insert my records for me, instead of using the GUI: “INSERT INTO ratings VALUES (1, 0, 0, ‘’)”.
This did the trick for me, it must have something to do with tabbing over the “used_ips” field and not inputting a ‘’ as through the query.
I hope this helps your problem
January 23rd, 2007
Hello, I run a video website and I would like to implement the rating system. I already did the implementation on http://www.chetos.es/experimento/ but in IE 6 (Internet Explorer) it is very bad displayed (you can see it here and here)
I tried the solution changing the CSS that I saw here, but it doesn’t work.
Anyone knows the reason?? Please help me.
Thanks!
January 23rd, 2007
Just checked that the error is the same in ALL Internet Explorer versions, you can see all the screenshots here:
http://browsershots.org/website/http://www.chetos.es/experimento/
Do you know why?? Help please!
Thanks
January 24th, 2007
Hi,
I like your script cause it is easy to implement if you have proper CSS, mysql, PHP knoledge.
However there is a flaw in the script because you suppose you will know from the beginning the items to rate.
For lot of new items you need to insert each new item on the rating table each time you add that item in the item’s table. This is not a goood idea on a nontransactional database. Another fix could be to add rating columns on the items table. Adding a longtext can slow your table. The fix I came up with is to add an insert line on both rpc.php and db.php:
after
$numbers = mysql_fetch_assoc($query);
Add:
if (!$numbers) mysql_query("INSERT INTO $tableName SET ID=’$id_sent’");
January 24th, 2007
Less technical question:
Trying to create a scoring system using the ajax bar 1-10 stars.
If I use an average, that will be shown, is there any other way to score results using votes and average that anyone has ever used or experienced?
Technical question:
How do I protect against bogus scores, ie. someone going in and giving the opposite people 1 star to lower their average.
Thanks guys......my FFL will be thankful!
January 24th, 2007
question: can’t see “Thanks for voting!” after voting. Everything else works. lokks like rpc.php not executed at all
January 24th, 2007
Hello,
I am a complete noob and would like to install this system on my site (proxy site). i would like to install it so when a user types in myspace.com(or anything else) on my site, the rating bar will recognize this site and show a rating on the proxied site. it will also remember the site and provide rating next time someone types it in.
please provide me your quote in US$. thank you.
January 26th, 2007
Hi igor if you have msn add
( admin at joesgraphics.co.uk ) or just email me and i will help. It sould be very easy to do.
January 27th, 2007
found problem in draw rating here in this line
@number_format($current_rating/$count,2)*$unitwidth
now calculate yourself for the 5 rating blocks
total votes: 10
total value: 100
unit width: 20
when this execute unitwidth will be 200px and it will stretched.. to fix this problem
$uwidth = @number_format($current_rating/$count,2)*$unitwidth;
if($uwidth > 100) {$uwidth=100;}
replace unitwidth with this $uwidth NOT WITH THIS ONE $unitwidth*$units
Have Fun!
January 28th, 2007
hi how do i install it in asp.net using sql as database?
January 29th, 2007
Lots of people still discovering this great work of ryans :)
If you are having problems, did you try to get the rating system working by itself first. I mean, making a new directory, uploading all the files to this dir, and going from there (including making & adding items/ seeding to the database).
228. Joe: So many questions! cssremix modified the files: removed the extra feedback (so its stars only) and such to fit their style. the javascript voting instead of db.php? links means you can only vote using javascript (the old version of this script was like that) and isn’t necessarily a good idea..
239. Pete: right clicking the link> new window is using the non-javascript/ ajax manner. Clicking the voting image and just seeing a constant loading image means the ajax is never started or never gets a valid result back. Are you using a local computer? does it support ajax/ xmlhttprequest?
242. JinRoh: Looks like issues with the absolutely positioned rating bars. Grab firebug nd investigate what is influencing the rating css.
244. JB: Yes ryan is aware of the problems with this script, but it’s well over 6 months since he last worked on it - it was mostly a theory test to see if it could be done. :) Your fix has been covered but it’s good to see it again for people not reading all the comments, but, with your fix, people could easily add many bogus votes; you would be best to check the id is valid first.
245. Joe Smith_FFL: I don’t really understand the first part. By default, each item that gets rated gets an id. Are you wondering how to split the votes up so you can see for example, which user voted for what items?
part b: you could expand the ip lockout (by default you can’t vote for the same item again due to you having the same ip) to against the same group of items. To do this, i would add a ‘group id’ field for my items, and modify the database queries so they update this group id field… and then instead of checking if the ip has voted for the item, check against the group id. Thats a sizable hack but i’ve done similar heavy voting protection on my site.
246. iggy: uhh if you can’t see the ‘thanks for voting’ but the voting numbers DO update to reflect your vote, it may just be a css issue. But i think more likely it’s an issue with the ajax not returning the vote correctly, maybe htaccess/ phpnuke related issue.
250. briiiiiiiin: You’d have to ask the guy who modded it to asp (check these comments) or give it a go yourself.
January 29th, 2007
251.Zonteck
“242. JinRoh: Looks like issues with the absolutely positioned rating bars. Grab firebug nd investigate what is influencing the rating css.”
I have firebug and I don’t know what to do, I have been trying to fix it all this week, and I can’t!!! I don’t know what to do because I can’t use the rating system if it’s not properly displayed in IE. Please could you help me to discover the cause of the problem??
thanks
January 29th, 2007
Hi again,
it could be great to sync your script (update) with the original one (komodo update their Css Star Rating) since they change the css and somes things here and there…
http://komodomedia.com/blog/index.php/2007/01/20/css-star-rating-redux/
If you could add too a possibility to ‘flush’ the ips after x times so the dbase can’t get too big after a while, it could be greatly appreciated !
regards,
January 29th, 2007
I get this error when I try to see the script; Error: No Database Selected - I’ve wrote all of what’s required on _config-rating.php ;
$dbhost
$dbuser
$dbpass
$dbname
$tableName
I don’t see any “$mysql_database = “"” can that be the problem? Hmm…
just thankful for any help =)
/eric
January 30th, 2007
In the file rpc.php after the line 24 insert the foling code:
if (mysql_affected_rows() == 0) { mysql_query("INSERT INTO $tableName VALUES (’$id_sent’, 0, 0, ‘’)") or die(” Error: “.mysql_error()); }
This will automaticly insert values if the rating id is not egzists.
January 30th, 2007
Hi, I’d like to pass in another variable via ajax. What do i need to change? For example, I want to pass the ‘type’ var.
http://www.flocasts.com/flowrestling/rpc.php?j=5&q=85&t=74.193.68.101&c=5 &type=images
January 31st, 2007
After installing as per your guidelines. I get this error. I have stopped the script from LocalSettings.php. Help will be appreciated.
Version: MediaWiki 1.9
Fatal error: Call to undefined function: wfrunhooks() in /usr/local/4admin/apache/vhosts/knowledgewithoutlimits.com/httpdocs/w/includes/SpecialPage.php on line 186
January 31st, 2007
hey, so i got everything working right with wordpress, except the images arent showing up… just text.
http://belmontshorenow.com/about
please help. thanks!
February 01st, 2007
very good script, thank you.
February 01st, 2007
I am able to get this to work perfectly in its own directory, which I have set-up as: /images/ratings/
When I set this up in my templates (ExpressionEngine is my CMS), the following occurs:
- I AM able to load the existing rating and vote count
- BUT, when I add a rating, the loading picture is displayed and it hangs. When I refresh the page, I see that there has been no addition to the server.
Is this related to how I set-up my directories? The only real modification I have done was to set-up change the line in my templates to:
Also, I have tried setting the following line in the other php pages:
require(’/home/jeremy/public_html/images/ratings/_config-rating.php’);
What am I missing?
Thanks!
February 01st, 2007
it was just the path. i made them absolute and it works. awesome.
February 01st, 2007
well you love me. now it is just playing the loading circle, but doesnt do anything else lol.
February 03rd, 2007
Tim, is the path in ratings.js correct?
February 03rd, 2007
Zonteck, I am having the same problem as 239. (Pete) I can’t seem to locate the problem. Any ideas would be great.
All the files are in the Ajax directory and all my pages are pointing correctly.
Now if I go to this page
http://www.prismdaisy.com/desktop/Ajax/
It works fine, but on my own pages
http://www.desktop.prismdaisy.com/desktop_wallpaper_landscape_clouds.php
It seems to hang up.
I use FireFox, Mysql 4, please let me know if there is anything else you need to know.
February 03rd, 2007
Okay, I solved it, here is what I did: I placed all the files that were in the Ajax folder and changed all links to match. Now it works!!! Great script, thanks!!!
February 03rd, 2007
Hello I need help again.
in my website http://www.chetos.es/experimento/ stars are not shown if I don’t pass my mouse over them, and it’s only displaying 3 of the 5 stars… you know why is this happening??
PS: If I set stars to 16px it displays well, but not at 20-30px, maybe a size issue??
Please help!!
February 03rd, 2007
JinRoh why dont you just make some 16-16 px stars with a background that matches your pages background cus you say 16px is ok.
February 03rd, 2007
I was using 16px with transparent background, but I want to use 25px stars (also with transparency, not THOSE stars) but they don’t display well :/
February 03rd, 2007
Here is the 16px version, but I would like to use 25px stars
http://www.chetos.es/star.php
February 03rd, 2007
D’oh!! I forgot to change the size in config rating.php