Unobtrusive AJAX Star Rating Bar

This script is no longer supported.

Download and use this script at your own risk. There is no support offered in any way, shape or form. Best of luck using this script. Thank you!

Unobtrusive AJAX Rating Script

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

Creative Commons License 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, .(JavaScript must be enabled to view this email address).


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

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!

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!


Comments are closed for the Star Rater!

Sorry, but comments have been closed for this script. 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

  1. 241. Bill

    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

  2. 242. JinRoh

    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!

  3. 243. JinRoh

    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

  4. 244. JB

    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’”);

  5. 245. Joe Smith_FFL

    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!

  6. 246. iggy

    January 24th, 2007

    question: can’t see “Thanks for voting!” after voting. Everything else works. lokks like rpc.php not executed at all

  7. 247. igor

    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.

  8. 248. Joe

    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.

  9. 249. Moazam

    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!

  10. 250. briiiiiiiin

    January 28th, 2007

    hi how do i install it in asp.net using sql as database?

  11. 251. Zonteck

    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.

  12. 252. JinRoh

    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

  13. 253. sexydave

    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,

  14. 254. Eric Johnson

    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

  15. 255. FDisk

    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.

  16. 256. Andy

    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

  17. 257. Nilam

    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

  18. 258. tim

    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!

  19. 259. resimler

    February 01st, 2007

    very good script, thank you.

  20. 260. Trend Hunter

    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!

  21. 261. tim

    February 01st, 2007

    it was just the path. i made them absolute and it works. awesome.

  22. 262. tim

    February 01st, 2007

    well you love me. now it is just playing the loading circle, but doesnt do anything else lol.

  23. 263. Dwilkinsjr

    February 03rd, 2007

    Tim, is the path in ratings.js correct?

  24. 264. Prismdaisy

    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.

  25. 265. Prismdaisy

    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!!!

  26. 266. JinRoh

    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!!

  27. 267. Joe

    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.

  28. 268. JinRoh

    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 :/

  29. 269. JinRoh

    February 03rd, 2007

    Here is the 16px version, but I would like to use 25px stars

    http://www.chetos.es/star.php

  30. 270. JinRoh

    February 03rd, 2007

    D’oh!! I forgot to change the size in config rating.php

Sorry, comments are closed.