<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>jQuery Tutorial : Simple ajax star rating</title>
<meta name="Keywords" content="Star rating, jQuery, ajax">
<meta name="Description" content="jQuery Tutorial : Simple ajax star rating">
<meta http-equiv="Content-Language" content="en">
<meta name="robots" content="index,follow">
<script src="rating/jquery.min.js" type="text/javascript"></script>
<script src="rating/starrating.js" type="text/javascript"></script>
<link href="rating/starrating.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<?php
// include update.php
include_once 'update.php';
// get all data from tabel
$arr_star = fetchStar();
?>
<?php
// start looping datas
foreach($arr_star as $star){ ?>
<h2>Star Rater - <?php echo $star['id'];?></h2>
<ul class='star-rating' id="star-rating-<?php echo $star['id'];?>">
<?php /* getRating($id) is to generate current rating */?>
<li id="current-rating-<?php echo $star['id'];?>" style="width:<?php echo getRating($star['id'])?>%"><!-- will show current rating --></li>
<?php
/* we need to generate 'id' for star rating.. this 'id' will identify which data to execute */
/* we will pass it in ajax later */
?>
<span id="<?php echo $star['id'];?>">
<li><a href="javascript:void(0)" title="1 star out of 5">1</a></li>
<li><a href="javascript:void(0)" title="2 stars out of 5">2</a></li>
<li><a href="javascript:void(0)" title="3 stars out of 5">3</a></li>
<li><a href="javascript:void(0)" title="4 stars out of 5">4</a></li>
<li><a href="javascript:void(0)" title="5 stars out of 5">5</a></li>
</span>
</ul>
<?php } ?>
</body>
</html>
ีupdate.php Code (PHP)
<?php
// connect to database
$dbh=mysql_connect ("localhost", "user", "password") or die ('Cannot connect to the database');
mysql_select_db ("database",$dbh);
if($_GET['do']=='rate'){
// do rate and get id
rate($_GET['id']);
}else if($_GET['do']=='getrate'){
// get rating and get id
getRating($_GET['id']);
}
// get data from tabel
function fetchStar(){
$sql = "select * from `vote`";
$result=@mysql_query($sql);
while($rs = @mysql_fetch_array($result,MYSQL_ASSOC)){
$arr_data[] = $rs;
}
return $arr_data;
}
// function to retrieve
function getRating($id){
$sql= "select * from vote`` where id='".$id."' ";
$result=@mysql_query($sql);
$rs=@mysql_fetch_array($result);
// set width of star
$rating = (@round($rs[value] / $rs[counter],1)) * 20;
echo $rating;
}
// function to insert rating
function rate($id){
$text = strip_tags($_GET['rating']);
$update = "update `vote` set counter = counter + 1, value = value + ".$_GET['rating']." where id='".$id."' ";
$result = @mysql_query($update);
}
?>
javascript Code (PHP)
// JavaScript Document
$(document).ready(function() {
// get rating function
function getRating(id){
$.ajax({
type: "GET",
url: "update.php",
data: "do=getrate&id="+id,
cache: false,
async: false,
success: function(result) {
// apply star rating to element
$("#current-rating-"+id+"").css({ width: "" + result + "%" });
},
error: function(result) {
alert("some error occured, please try again later");
}
});
}
// link handler
$('.ratelinks li a').click(function(){
// get the parent id
var idStar = $(this).parent().parent().attr('id');
$.ajax({
type: "GET",
url: "update.php",
data: "rating="+$(this).text()+"&do=rate&id="+idStar,
cache: false,
async: false,
success: function(result) {
// remove #ratelinks element to prevent another rate
$("#ratelinks").remove();
// get rating after click
getRating(idStar);
},
error: function(result) {
alert("some error occured, please try again later");
}
});
});
});
Load balance : Server 05
