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, {encode=inquiry@masugadesign.com title=shoot me an email}.


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. 271. danny

    February 03rd, 2007

    hi everyone, has anyone figured out a surefire way to fix the “hanging” issue when the user votes? here’s an example….

    http://www.grademycollegetown.com/rating/index.php?poi_id=1

  2. 272. stupefait

    February 03rd, 2007

    Thx for grate script. After some modifications and a little of pain :) itegrated it with my phpbb based site and user system.

  3. 273. JinRoh

    February 03rd, 2007

    Hello, once I fixed all my issues, do you know it would be possible to make, for example that the items in the playlist at the right get arranged by votes? I mean if a video has an average of 4.9 gets at the top and an 0.1 gets at the bottom!.

    It would be great if someone ones or could help me to do it (I can pay you, but not very much i’m a student hehe)

  4. 274. JinRoh

    February 04th, 2007

    D’oh! Now it doesn’t display properly on MSIE6.0

    http://browsershots.org/png/full/64/6469a29a9a717583f6da2f8a0ae25fed.png

    Do you know why?? Please anyone help :(

    The website is http://www.chetos.es and it *should* display as this:

    http://browsershots.org/png/full/4a/4a647d0fd69a0809d13bc3f60eaa86c5.png

  5. 275. L0nely^C0wboy

    February 04th, 2007

    This is fantastic!! Works solid cool!

  6. 276. Joe

    February 04th, 2007

    (stupefait) looks nice how u have placed that on your site.


    (JinRoh) about the arranged by votes thing that could be done with some php and sql to order them by votes is that the only page you have with the votes and links to play teh video on the left.

    About the stars over lapping the text could be just the css or were the code is placed and how its coded if you still need help jst ask and do u have msn to i can help u over ther its easyer.

  7. 277. stupefait

    February 04th, 2007

    RE[276. Joe ] => :
    Major idia: that with phpBB one shouldn’t and often couldn’t use “echo” instructions, so I devided _drawrating.php function on 2 parts: 1st one -  calculations in php file, and 2nd one is output in phpbb template file.

  8. 278. JinRoh

    February 04th, 2007

    Hello, Joe, please could yo help me with the problem with MS IE 6.0? I don’t have IE6 so I can’t try for my self. My MSN Messenger is—> JinRoh_AT_JinRoh_DOT_org

    Thanks for your help

  9. 279. JinRoh

    February 04th, 2007

    Hmm!! I read that IE6.0 doesn’t display “properly” the that I am using to allocate correctly the stars, maybe that’s the problem??

    Please a css-guru knows how to fix? :D Thanks

  10. 280. Joe

    February 04th, 2007

    HI (stupefait) cool do u think i could see the source code of the template and the _drawrating.php maybe usefull for 1 of my sites. Im no good with javascript im going to learn it soon but in the meen time do you think i could use what you have done to make it that only loged in user can vote and hav you set it up so it uses usernames not ips etc


    (jinroh) iv added you to msn so if your on tomorow ill try and help you. :)

  11. 281. Dwilkinsjr

    February 05th, 2007

    Is it possible to get transparent images of the stars and working graphic?

  12. 282. Dwilkinsjr

    February 05th, 2007

    Well I’m still requesting the transparent stars but heres something we can all use.

    If you want to change your loading graphic this website will make one for you, for free and its instant!

    http://ajaxload.info/

    I also wrote a php function to automatically calculate the CSS where you need to multiply. If anyone is interested let me know and I’ll package it up for distribution.

  13. 283. JinRoh

    February 06th, 2007

    Dwilkinsjr, you can do a transparent background if you want (use photoshop, check my website to look an example)

    By the way, when is the “loading graphic” displayed? Because I have never seen it (i’m using firefox)

  14. 284. stupefait

    February 06th, 2007

    RE[280]. Joe {in the meen time do you think i could use what you have done to make it that only loged in user can vote and hav you set it up so it uses usernames not ips etc}

    I tried many different version with different restrictions on voting

    TO deal with USERID we should inserte new field
    ‘IDS’ in TABLE exactly the same type as ‘IPS’

    In template I entered code:

    <!—BEGIN rating_ID_exist—>
      Currently {RATING_CURRENT}/{RATING_UNITS}

    {RATING_STARS_LIST}

    Рейтинг: {RATING_CURRENT_1}/{RATING_UNITS} (Всего проголосовало: {RATING_COUNT})
    {RATING_NO_GUESTS}


    <!—END rating_ID_exist—>
    </pre>
    <!—END of RATING MOD—>


    IN PHP file

    // RATING MOD BY SHULGINRU

      require($phpbb_root_path . ‘_config-rating.’.$phpEx); // get the db connection info
     

      $rating_units = 10;
      $rating_stars_list = ‘’;
      $rating_voted_class =0;
      $rating_id = $entry_id;
      $rating_ip_id = $userdata[‘user_id’] + 1000000;

      $rating_no_guests = !($userdata[‘user_id’] + 1); // id = -1 for guest
     
      $rating_ip = $_SERVER[‘REMOTE_ADDR’];
      $query=mysql_query(“SELECT total_votes, total_value FROM $tableName WHERE id=’$rating_id’ “)or die(” Error: “.mysql_error());


    $numbers=mysql_fetch_assoc($query);
    if($numbers)

      $rating_count=$numbers[‘total_votes’]; //how many votes total
      $current_rating=$numbers[‘total_value’]; //total number of rating added together and stored
     
      // determine whether the user has voted, so we know how to draw the ul/li
      //$rating_voted=mysql_num_rows(mysql_query(“SELECT used_ips FROM $tableName WHERE used_ips LIKE ‘%”.$rating_ip.”%’ AND id=’”.$rating_id.”’ “));
      $rating_voted2=mysql_num_rows(mysql_query(“SELECT used_ids FROM $tableName WHERE used_ids LIKE ‘%”.$rating_ip_id.”%’ AND id=’”.$rating_id.”’ “)); 
     
      if($rating_voted2 || $rating_no_guests)
      {  $rating_voted_class =1;  }
      else
      { 
      for ($ncount = 1; $ncount ’.$ncount.’’;
        }
     
      }
      $ncount=0; // resets the count
      $template->assign_block_vars(‘rating_ID_exist’, array() ); 
    }
    // END OF RATING MOD


    and later in php file one must add

    //
    // Send general vars to template
    //
    $template->assign_vars(array(
    ......
          .....
    //rating function by shulginru
    ‘RATING_ID’ =>  $rating_id,
    ‘RATING_UNITWIDTH’ =>  $rating_unitwidth,
    ‘RATING_UNITS’ => $rating_units,
    ‘RATING_COUNT’ => $rating_count,
    ‘RATING_TOTALUNITSWIDTH’ =>  $rating_unitwidth*$rating_units,
    ‘RATING_CURRENT_WIDTHFORMAT’  => number_format($current_rating/$rating_count,2)*$rating_unitwidth,
    ‘RATING_CURRENT’ => number_format($current_rating/$rating_count,2),
    ‘RATING_CURRENT_1’ => number_format($current_rating/$rating_count,1),
    ‘RATING_STARS_LIST’ => $rating_stars_list,
    ‘RATING_NO_GUESTS’ => ($rating_no_guests)?’Голосования доступны для зарегистрированных пользователей’:’‘,
    ‘RATING_VOTED_CLASS’ => ($rating_voted_class)?‘class=“voted”’:’‘
    );

    And as we need to send one more paramentr we must add one field in JavaScript Function

    var ratingAction = {
      ‘a.rater’ : function(element){
      element.onclick = function(){

      var parameterString = this.href.replace(/.*?(.*)/, “$1”); // onclick=“sndReq(‘j=1&q=2&t=127.0.0.1&c=5’);
      var parameterTokens = parameterString.split(”&”); // onclick=“sndReq(‘j=1,q=2,t=127.0.0.1,c=5’);
      var parameterList = new Array();

      for (j = 0; j ‘;
      xmlhttp.open(‘get’, ‘rpc.php?j=’+vote+’&q=’+id_num+’&t=’+ip_num+’&u=’+ipid_num+’&c=’+units);
      xmlhttp.onreadystatechange = handleResponse;
      xmlhttp.send(null);
    }

    Originally I wasn’t thinking about sharing this code with community and it was designed for very specific site based on phpBB.

  15. 285. stupefait

    February 06th, 2007

    pardon some russian language in the code provided above

    ‘RATING_NO_GUESTS’ => ($rating_no_guests)?’...‘:’’,

    send notification that
    ‘RATING_NO_GUESTS’ => ($rating_no_guests)?’Voting available for registered users only‘:’’,

  16. 286. stupefait

    February 06th, 2007

    Someting happened with the text I entered above: once again

    In template I entered code:

    (sorry, this has been deleted - ryan)

  17. 287. joker

    February 08th, 2007

    How modify this script, that after give a raiting script open next picture?!

    Example:
    http://www.hotornot.com/
    Section:
    select a rating to see the next picture.

  18. 288. Nate

    February 16th, 2007

    Hi could anyone help me set this up in Expression Engine.

    Any help would be very appreciated.

    Thanks

  19. 289. Danny

    February 19th, 2007

    Hi,
    good work. I just changed your script a bit and fixed few bugs.  Check it out on http://www.designfest.eu

  20. 290. dilligaf

    February 19th, 2007

    Hey all.  Just found this rating bar and think it is great.

    I have seen a couple questions and only one type of answer to keep bots/cheaters from voting over and over.

    The bots part is easy if the bot follows the rules (not all do) ...
    Add rel=“nofollow” to your voting links in _drawrating.php

    But, cheaters can copy the link and keep putting it into their browser (or call it from a script) and keep voting.  We need to make sure that the referer is our host…
    At the top of db.php and rpc.php, add:
    if ($_SERVER[“HTTP_REFERER”] != ‘http://’ . $_SERVER[“HTTP_HOST”] . ‘/’ &&
      $_SERVER[“HTTP_REFERER”] != ‘http://’ . $_SERVER[“HTTP_HOST”] . ‘/index.php’)
      exit(“Are you trying to cheat?This can only be called directly from the voting page”);

    That puts up a page with a cheater message.  Or, you can just redirect them to your main page by replacing the exit line with:
    header(‘Location: http://’ . $_SERVER[“HTTP_HOST”]);

  21. 291. Pablo

    February 21st, 2007

    In the .ratingblock class on the css:
    Why is the with set to 50%?
    Whats the reason for that?

    If I change that with, all kind of weird things start to happend.

  22. 292. najam

    February 21st, 2007

    its great but the problem is u have to enter the first value in the database then it works.
    i have spend a lot of time on it but at last i find the soulution

  23. 293. ZeFiR

    February 23rd, 2007

    HI!
    Sorry for my English ;)
    I’m experiencing problem with MS IE 6.0
    Reading your comments I couldn’t find solution.
    Demo site is http://proxygen.kiev.ua/
    Be kind, help me;) I need masters’ help:)
    Thanks in advance.
    Regards, ZeFiR.

  24. 294. kelly

    February 23rd, 2007

    how do you auto add IDs to the DB?...nothing is working for me..please help!

  25. 295. Vahrmeijer

    February 24th, 2007

    the rating bar is working for mediawiki 1.8.2 and higher:
    see http://www.leerwiki.nl

  26. 296. dev

    February 28th, 2007

    Hi Ryan, Thanks a lot for this great script.. Keep it up, man.
    Needed quite a bit of tweaking with the urls, but ultimately got it to work.

  27. 297. Jordan

    March 03rd, 2007

    does anybody have any idea what could be stopng the ajax from working on my site? the install is working fine and works perfectly on my test page http://www.scitalks.com/testindex.php however when i use the same code in the actual site it reverts to doing a page refresh http://www.scitalks.com/indexJG.php does anybody have any idea what could be stoping the javascript both index files are in the same level of the same directory and include the javascript in the same way.  Please help!!?!!

  28. 298. Jordan

    March 03rd, 2007

    With more research and a post jinron in another forum i have discovered that it was the onload fuction of the body tag that kills the ajax part of this rating system.  not a huge deal as i was just preloading images so i used css instead but just wondering if anyone else has come acrost a solution for this problem.  it doesnt matter what code i put in the onload it breaks the ratings so it has nothing to do with the function i was calling

  29. 299. Jordan

    March 03rd, 2007

    I can’t figure out why the rater is just displaying text here:
    http://juicewire.net/public/view/49

    And shows the stars on this page:
    http://juicewire.net/public/view/full/49

    Both use the same install…
    I don’t know what could possibly be causing a conflict.

  30. 300. Jordan

    March 03rd, 2007

    I got it working nevermind.  I have another quick question.  Is there an easy way to have multiple sizes of the stars for different pages without having multiple installs?

Sorry, comments are closed.