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.
October 02nd, 2006
Perfect :) I cooperate with guidee (somewhere above). I gonna send the last modified version probably tomorrow. There are some database performance hits ;)
October 03rd, 2006
Guyz i want to create 3000 ids.1 to 3000 .How can i do that with a sql command?
October 05th, 2006
Nice work. I made a b2evolution plugin that is based on an earlier version of your code (I also made mine work without JS). The plugin handles all of the db stuff, displays a list of top rated items, and shows notices in a pretty js popup that fades in and back out four seconds later.
You can read about it and try it out here:
http://plugins.b2evolution.net/index.php/2006/10/05/star_rating
October 05th, 2006
after installing, i vote but it just say :
1. Rating: 4.0/5 ( votes cast) Thanks for voting!
shouldnt it be ???
1. Rating: 4.0/5 (1 vote cast) Thanks for voting!
also, when i refresh the page my vote is gone and i can vote again
has aone had this issue ?
Can someone please help? I am in deep need right now. THanks.
October 08th, 2006
Anyone know how to make the output all one variable so you can place it somewhere else in the page? My pages are generated before hand and this just spits out the entire response. Tried editing the output for _drawing with no luck.
October 09th, 2006
Very nice tool. I love it.
I am testing it right now and found a problem on Internet Explorer.
The star rating object work perfectly when it is left aligned.
If it is centered, the current-rating’s drawing starts from the center and not from the left and the final drawing is screwed up. It doesn’t happen on firefox though.
I’m trying to understand the code to try to fix it but I’m far from familiar with this technology so if someone has a fix, thanks for sharing.
October 09th, 2006
Hugues, I have the same problem, but I didn’t even figure that my center alignment was the problem… thank you :p
Anyway, if someone have an idea, I would like to hear it too
October 09th, 2006
Hugues, it’s me again, I just found a solution. Modify your css/rating.css like this:
.ratingblock {width: 50%;
display:block;
padding-bottom:8px;
margin-bottom:8px;
margin-left: auto;
margin-right: auto;
}
I just added the margin-left and margin right to make it centered…
Man I can’t believed I was stuck the whole week end and didn’t see the “center” problem…
October 10th, 2006
So, and how use this is AJAX Star Rating Bar script into Joomla CMS news?
Thanks
October 10th, 2006
Jubei,
Nice workaround but it seems to work only when we use 10 stars.
If it is less than 10, let’s say 5, the space needed for 10 stars is centered but the 5 stars are left aligned inside the block needed to display the 10 stars
Plus, the text underneatch is not centered. It is also left aligned in the 10 star block
October 10th, 2006
Jubei,
I found the fix in case one wants to center the rating_bar writing something like this:
In rating.ccs, replace “absolute” with “center in the position for:
.unit-rating li.current-rating {background: url('../images/starrating.gif') left bottom;
position: center;
height: 30px;
display: block;
text-indent: -9000px;
z-index: 1;
}
October 11th, 2006
Hi, thanks for great scripts. Bit of a neewbie. All looking good from latest download, until i go to update a rating:
“A Runtime Error has occurred. Line 92. Error: ‘document.all[...]’ is null or not an object.”
Found in ‘rating.js’
function changeText( div2show, text ) {
// Detect Browser
var IE = (document.all) ? 1 : 0;
var DOM = 0;
if (parseInt(navigator.appVersion) >=5) {DOM=1};
// Grab the content from the requested “div” and show it in the “container”
if (DOM) {
var viewer = document.getElementById(div2show);
viewer[removed] = text;
} else if(IE) {
>>>THIS IS LINE 92!>>>document.all[div2show][removed] = text;
}
}
No doubt you good people can point me in right direction. Many thanks.
October 12th, 2006
I looked for days to find the best looking and easiest rating system to implement. This one is hands down the best. Thank you for all your hard work.
ADam
October 12th, 2006
I can not thank you enough. This is excellent. I have been searching for the past 8 hours and trying to get something like this to work. Wow it is flat out incredible. Yesterday was my first time to start working with php and I am amazed that I was able to install this thing. It took me awhile to get the mysql setup because I had never used it before but after a long time I finally got it.
Here is the _drawrating page, this is a modded version so you do not have to make manual db inserts!
//Code
function rating_bar($id,$units=’’) {
// get the db connection info
require(’_config-rating.php’);
//set some variables
$ip = $_SERVER[’REMOTE_ADDR’];
if (!$units) {$units = 10;}
$query=mysql_query("SELECT total_votes,
total_value, used_ips FROM $tableName
WHERE id=’$id’ “) or die(” Error: “.mysql_error());
$numbers=mysql_fetch_assoc($query);
//how many votes total
$count=$numbers[’total_votes’];
//total number of rating added together and stored
$current_rating=$numbers[’total_value’];
//plural form votes/vote
$tense=($count==1) ? “vote” : “votes”;
$voted=mysql_num_rows(mysql_query("SELECT used_ips
FROM $tableName WHERE used_ips LIKE ‘%".$ip."%’
AND id=‘“.$id.”’ “));
if (!mysql_num_rows($query)) { //This is the edit
$sql = “INSERT INTO $tableName (`id`,
`total_votes`, `total_value`, `used_ips`)
VALUES (’$id’, ‘0’, ‘0’, ‘’)”;
$result = mysql_query($sql);
}
//Code
// now draw the rating bar
?>
“>
“ class="unit-rating" style="width:px;">
px;">Currently /
<a>&q=&t=&c=” title=” out of “ class="r-unit rater"></a>
class="voted" >. Rating: / ( cast)
October 13th, 2006
I am trying to configure this to work!
http://www.gantdesigns.com/ajaxrating/
I am planning to put this on my website, and if anyone can help me, please!
October 14th, 2006
Hi Ryan,
Thank you for the script offer. I tweaked the settings and made a new icon for the display. Works great.
Example:
http://www.programhoppers.com/
David
October 15th, 2006
@ZodiacfreaK
Can you give us link of your _drawrating.php?
Thanks.
October 15th, 2006
Hi, what do I do about my error?
I tried upgrading, but now all I get is Error connecting to MySQL. I checked, it’s the correct information, but it will not connect. What’s going on?
October 16th, 2006
I can not create table keep getting this error message = “Parse error: parse error, unexpected T_STRING”
please tell me what is wrong on line 15.
October 16th, 2006
Hmm… I read the comments, but it’s just as frustrating as figuring out how this thing works!
I will be putting this on both of my websites: gantdesigns.com and buufdesigns.com. I get a lot of traffic flow, and I really needs this rating system to run.
Is it possible if you can make an accurate “readme.txt” file that has the correct instructions and for us noobs to understand? :)
I really don’t understand about the redirection thing with the .js scripts. It’s really confusing.
Thanks Ryan.
-fuBar
October 17th, 2006
Thank you, its really great.. I hope i will tomorrow i will integrate it in my website http://www.sooperfriends.com
Thanks again!
October 17th, 2006
Hi,
I have a newbie question. I can’t figure out if this script can be used to rate a single items. Let’s say I have a database of BOOKs and then the book’s title will be displayed in the page. I want that after the title of the book, the rating images will be displayed. If I click, say 3, does it rate on that certain book?
October 18th, 2006
First, thank you Ryan… It works great and it looks super slick. For those who have a hard time installing the script, just read all the comments. I know very little php and it didn’t take me too long to have it up and running =)
Anyhow, a little question for the experts out here:
---How i could tweak it to show me the rate (i.e “"3/5") in front of starts rather than below them. The answer doesn’t seem to be in the CSS file!---
Thanks!
October 19th, 2006
I notice that a lot of people have posted the same problem, but it seems no one addressed the problem. When i vote it just says 1. Rating: 5.0/5 ( votes cast) Thanks for voting!, its not counting the votes, and when i refresh the vote isn’t there and i can’t vote again. Can someone please help! Thanks
October 19th, 2006
I don’t think people are making a table in mySQL and prepopulating it with an ID. The script as written WILL NOT automatically insert ID’s in your database! You have to implement something like Comment 12 above if you want IDs to be automatically created. 9 times out of 10 this is the problem with votes not being counted.
If you have the problem Eric has - have you looked in your database to see if the vote is in there? Did you put the ID in the DB yourself? No? Then votes won’t be recorded! I wish I had a dollar for every email I’ve received about this!
October 19th, 2006
Great script! Thanks a lot for sharing!!!
October 19th, 2006
Hi,
I love the rater!! The installed files do not work for me, boo hoo yes. My brain can just about work out how to get PHP, MySQL, PHPMyAdmin all working good on LOCALHOST. Nice.
Ok, I’ve created db and pre-populated with ID’s,
so the only other things changed, are the dbname,username and password, but I am getting this error on loading the ‘index.php’ file:
Parse error: parse error, unexpected $end in C:Inetpubwwwroottest_drawrating.php on line 51.
It can’t be the scripts, they work for loads of you. I know it’s me but where my goin’ wrong?
I WANT IT BAD, SO BAD I’ll crawl on my hands and knees through broken glass etc etc.
;P
October 20th, 2006
Great script. Thanks Dan for the cookie code. It’s working great to vote for NFL logos http://www.logodesign.com/rate-nfl-logos.php
October 23rd, 2006
I am a newbie to this and am getting the error code below using the following code to create the database
CREATE TABLE ratings (
id VARCHAR(11) NOT NULL,
total_votes INT NOT NULL DEFAULT '0',
total_value INT NOT NULL DEFAULT '0',
used_ips LONGTEXT)
Parse error: syntax error, unexpected T_STRING in /home/casinoh/public_html/casinoh/_config-rating.php on line 13
can any body help please
thanks
October 23rd, 2006
Sorry if this hasn’t been made clear up until now, but the code to create the table in the DB, as included in release 1.1, is WRONG - and I’m sorry but I do not have time to change it right now. Please read the comments for an update (try comment #58).
Also realize that you DO NOT need to use the table creation SQL. If you have Navicat, CocoaMySQL, phpMyAdmin, or any number of other equally capable programs at your command, try using their built in tools to create a table, and just make sure it has the correct fields.