homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

5 star rating system help

 9:55 pm on Dec 15, 2012 (gmt 0)

Hi folks, just getting confused with a star rating script I found online and am trying to implement...

The basic page is thus:


$votes = mysql_query("SELECT rat_rating FROM fs_nb_ratings WHERE rat_ID = 1");
$votesnr = 0;
$totalvotes = 0;

while($vote = mysql_fetch_array($votes)){
$votesnr ;
$totalvotes = $vote['rat_rating'];

if($votesnr == 0){
$rating = 0;
else {
$rating = $totalvotes/$votesnr;

$roundedrating = floor($rating) + round($rating - floor($rating)) / 2 ;

<div class="star-rating" id="rating1result<?php echo $roundedrating; ?>" style="background-position:0 -<?php echo $roundedrating * 32; ?>px;">
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="star"></div>
<div class="result">
<span style="color:green"><?php echo round($rating,2); ?></span> (<?php echo $votesnr; ?>)

<script type="text/javascript">


$('.star').mouseover(function (){
var star = $(this).index()+1;
var x =(32 * star);
$(this).parent().css('backgroundPosition','0% ' +(-x)+ 'px');

$('.star-rating').mouseout(function (){
var originalresult = $(this).attr('id').split('result')[1];
var y =(32 * originalresult);
$(this).css('background-position','0%' +(-y)+ 'px');


$('.star').click(function (){
var id = $(this).parent().attr('id').split('rating')[1];
var vote = $(this).index() -1;

type: "POST",
data: 'id='+ id + '&vote='+ vote

$(this).parent().html(" ");


I'm not sure I've put it all together properly and there were a few errors here and there in the tutorial script only some of which were corrected by other folk in comments below it so I did my best to iron them all out but I know bog all about javascript.

save-vote.php reads:

$id = intval($_POST['id']);
$vote = intval($_POST['vote']);

mysql_query("INSERT INTO fs_nb_ratings (rat_ID, rat_rating) VALUES(" . $id . "," . $vote . ")") or die(mysql_error());

...the result is that everything looks fine and it adds appropriate lines to the db, but no matter what star rating you give it it always just adds '3' to the db as the rating number?

it also doesn't give a total rating when the page is refreshed.

Hope that's enough info and makes sense

Any hints appreciated




 1:45 am on Dec 16, 2012 (gmt 0)

Check each stage

In server log is entry like

In browser "view page source" is it like
<div class="star-rating" id="rating1result
3 ...

that should narrow the problem considerably


 10:44 am on Dec 16, 2012 (gmt 0)

Thanks! I'm ashamed to say I'm not sure where to find server log... but I'll have a root around.

on inspecting elements using chrome it's bring up

Uncaught TypeError: object is not a function ratingtest.php:78
anonymous function) ratingtest.php:78

And when clicking any of the stars it then gives:

Uncaught TypeError: Cannot call method 'split' of undefined ratingtest.php:59
(anonymous function) ratingtest.php:59
jQuery.event.dispatch jquery.js:3058

I'm a bit lost now tho, I've googled the errors and read some stuff and am guessing there are just some errors in the script at the bottom.


 11:59 am on Dec 16, 2012 (gmt 0)

Cannot call method 'split'

Looks like one of the references to split is failing

for debug replace
var originalresult = $(this).attr('id').split('result')[1];
alert( 'test 1 ' + $(this).attr('id') );
var originalresult = $(this).attr('id').split('result')[1];

var id = $(this).parent().attr('id').split('rating')[1];
alert( 'test 2 ' + $(this).parent().attr('id') );
var id = $(this).parent().attr('id').split('rating')[1];


 2:45 pm on Dec 16, 2012 (gmt 0)

Thanks, I added those lines and it brings up a window on rolling over and highlighting the stars saying "test 1 rating1result0" No matter how many starts are highlighted or however many ratings have been previously added to the db.

If I take out test 1 it gives the same result for test 2.

Have solved the issue of the right rating added to the db tho by changing

$('.star').click(function (){
var id = $(this).parent().attr('id').split('rating')[1];
var vote = $(this).index() -1;
to +1

 10:48 pm on Dec 16, 2012 (gmt 0)

while($vote = mysql_fetch_array($votes)){
$votesnr ;
$totalvotes = $vote['rat_rating'];

should be
$votesnr++; ? the count of votes

 9:43 am on Dec 17, 2012 (gmt 0)

Probably! Thanks. I was just figuring out that bit - turns out all the '+' signs were removed from the tutorial script...not sure why :s

All is pretty well fine now but the maths is not working! :(
Every time I add a 5 star rating it drops the average rating down...

There must be something obvious somewhere but then knowing half the scripts I've borrowed before I was tempted to just try and re-write that bit. Grr.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved