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.
August 29th, 2006
Is there something I’m missing? I’m developing a site on my local computer so unfortuantely I don’t have the example to post. However I left everything the same as the example extracted from the archive. Javascript is enabled on both IE & Firefox yet it won’t utilize the AJAX it just submits directly to the db.php as per the link instead of triggering the ajax call to the rpc.php file Thanks and great work though! I know for sure the accessibility of this star rater works well if people have javsascript off :)
August 29th, 2006
Oh nice to see the 1.1 update. You’ve cleaned up the code a fair bit, good job.
@Jason G: I basically had mysql work out the average in the select for my old top X style page:
select id, r.total_value, r.total_votes from ratings r order by r.total_value / r.total_votes DESC, r.total_votes desc limit 10
August 30th, 2006
is there a possibility to remove the line under a rating unit. where can it be done?
August 30th, 2006
I am trying to work your rating system but when i try to go to my page and vote, And when i vote the ratings color does not show. The thank you message shows, but the ratings does not show. And when i refresh the page, the rating goes back to 0. It’s like the process did not go trough.
August 31st, 2006
hey, i like your cpmments script. would you share it?
August 31st, 2006
hi ryan, you did a great job.
i use your rating system on my site, but there’s a little bug in it.
when you use many rating bars in one site. i have one, with over about 100 on some it shows the right totalvotingvalue, but it doesn’t show the right amount of filled stars. it just shows the rating bar without voted stars. this only happens by ratingbars where i personally rated.
i ‘ve done another check with the same code in the side and there it does. i dont’ know why? do you have a clue?
August 31st, 2006
it must have been a problem with the database entries? but don’t know which? it happend at 4 four bars out of 134.
August 31st, 2006
is there a possibility to get the rating bar an the text in the same line?
August 31st, 2006
Hi i am trying to work the scritp but everytime i try it, it never works. If you don’t know what i am talking about, here is a link from someones site. http://kokai.awardspace.com/rating the same thing is happening. The ratings doen not go through and when you refresh the page, all the ratings and score is gone. Please help. Thank you.
August 31st, 2006
@ michael. i guess the script isn’t connected right connected to the database, cause it doesn’t show the value… when i tried the value was shown, but a some ratingbars the filled stars not. but the prob has gone, by deleting the database entry and make a new for it.
but whats with the line under the rating bar? where can i find the entry, i searched in all files but didn’t find something like this. i would like to remove the line under the votingvalues.
August 31st, 2006
Is it just me or this script (the ajax portion) seems to only work with Firefox and IE7?
September 01st, 2006
Does anyone know if this script conflicts with any of the other javascript libraries out there for ajax stuff? I’m looking at choosing an ajax library to work with and I’d like to avoid any complications.
September 01st, 2006
I’ve discovered that the ajax submission of the votes does not work when it’s located on a page with a googlemap. The GoogleMap javascript code prevents the ajax voting from functioning making it submit traditionally.
September 01st, 2006
@yegor:
with opera it also works well.
September 01st, 2006
Anything on my last comment? Thanks…
September 02nd, 2006
Thanx for a nice script but I have a little problem:
Parse error: parse error, unexpected $end in _drawrating.php on line 51
Please if somebody can help me
September 02nd, 2006
Hey, I done it, THX for ALL, this is the link www.fane.xf.cz
September 02nd, 2006
One little question :-), can I set up time limit for voting?
September 04th, 2006
Hey U guys ! Congratulations for your script , it is a very good idea !
Well , i’d like to know how to put the text-line ( actually under the stars ) on the right of the stars ... I’ve tried some things but it doesn’t work !
Thanks for your answer and take care !
September 04th, 2006
Mac.
I did what you said but it did not work. I do not know why it did not work. I reput the quary database and i got the same results.I need help really bad. Thanks.
September 05th, 2006
@mac
just edit the ratings.css file to remove the horizontal line.in the file
.ratingblock {
width: 50%;
display:block;
border-bottom:1px solid #999;
padding-bottom:8px;
margin-bottom:8px;
}
</pre>
remove the following line
border-bottom:1px solid #999;and maybe get rid of the padding and margin. so u can place text next to or around it.
cheers for a great bit of ajax!
September 08th, 2006
waxor’s snippet for insertion is a good addition… however i have found it doesnt work on some servers… here is a fix to it:
This is the _drawrating.php file:
===snip snap===
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());
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);
}
===snip snap===</pre>
September 10th, 2006
Hey..
This is fantastic!!
I’m having one issue - the page is bringing up the right ID, and the correct number of start, but hangs on the submit of a new rating.
Check it out:: http://www.themenusite.ca/rating_test.php
September 11th, 2006
This script looks great, however non of the sql queries listed are working for me. The page just tmes out--I dont even get any errors. Any suggestions anyone?
September 11th, 2006
Hi,
Firstly i would like to say thanks for creating a script like this! I have been searching high and low on the internet to find one that i can integrate into my design.
Ok here is the problem. The script itself works fine. i have created a file called
“http://ishotornot.co.uk/ratingv2/sitefiles/test.php”
which works correctly.
I am now trying to intergrate it into my main website. The basis of my website is a HotorNot style site. I.e. where people can vote for random images that are displayed on the front page. When you go onto the main site you will see some random images when you refresh the page. I want the rating script to work alongside these images. For example depending on the image dispayed it gives you the option to vote for it and the total rating for the image.
Ok i have two tables in the database. One called “photos” and one called “ratings”
The table below is my “photos” table:
`photosid` bigint(15) unsigned NOT NULL auto_increment,
`comments` varchar(255) default NULL,
`filename` varchar(40) default NULL,
`username` int(12) default NULL,
`upldate` datetime default NULL,
`approved` char(1) default NULL,
`rating` int(11) NOT NULL default ‘0’,
</pre>
And this is the “ratings” table that i have created:
`id` varchar(11) NOT NULL default ‘’,
`total_votes` int(11) NOT NULL default ‘0’,
`total_value` int(11) NOT NULL default ‘0’,
`used_ips` longtext,
</pre>
Now the fun part, where and how do i get these two tables to talk?
The ID for the photo is “photosid” which is in the “photos” table, i presume i need to add an extra field in the “ratings” table to store the “photosid” so the rating/photo correspond?
The images are being dragged out dynamically via a recordset that randomises the images. I presume from that recordset i need to insert the “photosid” into the rating table.
I now i am asking alot, but for days i have been trying to figure this out and to be fair i am in desperate need of some help or advice! Could someone please advise me on how i can do this? or atleast guide me through the process.
Regards
Tom
September 12th, 2006
Excellent work Ryan! Your script is very elegant and the graphics used for the demo is pure eyecandy.
I was wondering how the mechanism of IP lockout works when multiple people from the same location behind a firewall will be voting. I am thinking that Network Address Translation will make sure that all users will look as if they have the same IP address. This will have the obvious effect that only the first user will be allowed to cast his rate.
Is this something anyone else has considered? Is it really a problem or are there workarounds for it?
Thanks,
Dan
September 12th, 2006
Hi,
First of all thanks for the nice script ryan. :) But I also had some problem with the AJAX part under Firefox 1.5.0.x (Linux). It worked with JavaScript disabled but it did not work with JS enabled: I got the loading icon but nothing happened… I read other guys also had this experience…
So I changed your AJAX solution to advAJAX (http://advajax.anakin.us/index-en.htm) and it solved my problem and reduced your JS-code by adding another JS-library to the stuff. :D Actually I use advAJAX on my website so it’s no problem to use it in the stuff too.
Changelog:
- the entire xmlhttp stuff deleted from the beginning of the rating.js
- handleResponse() deleted
- sndReq() changed:
xmlhttp.open(..)
xmlhttp.onreadystatechange…
xmlhttp.send(null);</pre>
CHANGED to
advAJAX.get({
url: “rpc.php?j="+vote+"&q="+id_num+"& [line wrap]
t="+ip_num+"&c="+units,
onSuccess : function(obj) {
var response= obj.responseText;
var update = new Array();
if(response.indexOf(’|’) != -1) {
update = response.split(’|’);
changeText(update[0], update[1]);
}
}
});</pre>
That’s all and it works! :)
regards,
Zsolt
September 13th, 2006
A kind person helped me with the SQL issue..here is what works for me:
CREATE TABLE `ratings` (
`id` varchar(11) NOT NULL,
`total_votes` int(11) NOT NULL default ‘0’,
`total_value` int(11) NOT NULL default ‘0’,
`used_ips` longtext,
PRIMARY KEY (`id`)
) TYPE=MyISAM AUTO_INCREMENT=3 ;</pre>
September 13th, 2006
OK, Now everything displays properly. However, I cant get the info to save. When I place a vote and refresh the page, the vote is lost. No votes are being saved. Suggestions anyone?
September 13th, 2006
Drew:::
It seems to me that you need to initialize new ratings in your database:
For example:
(sorry everyone, looks like Joe’s post got cropped here...and I couldn’t see it in the admin area, either - ryan)