I am currently facing an issue with implementing a star rating system on my web application. The problem lies in retrieving previously rated values and displaying them as blinking stars. For example, if a user had previously rated something with 4 stars, those four stars should blink to indicate the previous rating. I am currently saving user votes in a database and retrieving the rate value, but I'm unsure of how to bind this rating value to the stars.
Below is the code snippet:
.stars on{background:url(../image/star_on.gif) no-repeat;}
.stars li{
float:left;
width:17px;
height:17px;
background-image: url( '../image/ratingStarEmpty.gif' );
list-style-type:none;
transition:all 0.2s linear;
}
.stars:hover li{
background-image: url(../image/ratingStarFilled.gif);
}
.stars li:hover ~ li{
background-image: url( '../image/ratingStarEmpty.gif' );
}
Jquery Code for Returning Star Value:
$.ajax({
type: "POST",
url:'User/UserHome.aspx/BindInner',
data: '{id:'+ id +'}',
contentType: "application/json; charset=utf-8",
dataType: "json",
cache: false,
success: function(msg)
{
var xmlDoc = $.parseXML(msg.d);
var xml = $(xmlDoc);
innpageCount = parseInt(xml.find("innerPageCount").eq(0).find("innerPageCount").text());
var inncommonload = xml.find("InnerCommentonload");
// $("#MainBox"+id).find("#dvCustomers1 table").remove();
inncommonload.each(function () {
var sno=inncommonload.find("SNo").text();
var rate=inncommonload.find("Rating").text();
var star='<ul class="stars"><li class="starvalue" id="1star'+sno+'" onclick="AnsMark('+sno+',1); return false;"><a></a></li><li class="starrr" id="2star'+sno+'" onclick="AnsMark('+sno+',2); return false;"></li><li class="starrr" id="3star'+sno+'" onclick="AnsMark('+sno+',3); return false;"></li><li class="starrr" id="4star'+sno+'" onclick="AnsMark('+sno+',4); return false;"></li><li class="starrr" id="5star'+sno+'" onclick="AnsMark('+sno+',5); return false;"></li></ul>';
});
},
failure: function (msg) {
alert(msg.d);
},
error: function (msg) {
alert(msg.d);
}
});