hi guys,
hope you guys can help me out with this. This is the first time im using ajax so i am a complete beginner.
What i have is a 5 star rating system that i want to update without a page refresh. I've got the code for the rater working...i've even got to the point where if a user clicks on a star it calls an ajax function which runs a coldfusion page (which has a simple update query to update the database with the recorded vote).
What i'm struggling with is knowing how to have the star rating system update with this new information. At the moment i have it inside a div with id="rate" but im not sure what to do with it really. im confused with the whole ajax response thing.
This is my
index.cfm page
Code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS: Star Rating Redux</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="star_rating.css" rel="stylesheet" type="text/css" media="all">
<script type="text/javascript">
var http = false;
if(navigator.appName == "Microsoft Internet Explorer") {
http = new ActiveXObject("Microsoft.XMLHTTP");
} else {
http = new XMLHttpRequest();
}
function replace(vote) {
var chosen_vote = vote;
http.open("GET", "vote_submission/rate_submission.cfm?rate="+chosen_vote, true);
http.onreadystatechange=function() {
if(http.readyState == 4) {
document.getElementById('rate').innerHTML = http.responseText;
}
}
http.send(null);
}
</script>
</head>
<body>
<!--votes are stored as a running total and count -->
<cfquery name='q1' datasource='######'>
select total_votes, total_value from ratings where id=2
</cfquery>
<cfoutput query='q1'>
<cfset rating = (#total_value#/#total_votes#)>
rating= #rating#
<!--makes percentage fit in with 5 stars -->
<cfset ratingperc = (#total_value#/#total_votes#)*20>
ratingperc= #ratingperc#
<h1>CSS: Star Rating Redux</h1>
<div id="rate">
<ul class="star-rating">
<li class="current-rating" style="width:#ratingperc#%;">Currently 3/5 Stars.</li>
<li><a href="javascript:replace(1);" title="Poor" class="one-star">1</a></li>
<li><a href="javascript:replace(2);" title="Not Great" class="two-stars">2</a></li>
<li><a href="javascript:replace(3);" title="OK" class="three-stars">3</a></li>
<li><a href="javascript:replace(4);" title="Pretty Good" class="four-stars">4</a></li>
<li><a href="javascript:replace(5);" title="Fantastic" class="five-stars">5</a></li>
</ul>
</div>
</cfoutput>
</body>
</html>
this is my
rate_submission.cfm page (updates the database depending on which star was clicked)
Code:
<cfset vote = #url.rate#>
<cfquery name='vote_register' datasource='######'>
update ratings set total_votes = total_votes +1, total_value= total_value +#vote# where id=2
</cfquery>
im currently working on it at
www.critsesh.com/star. i have to refresh the page to see the effects.
Before you post, read our: 
ajax help - complete newbie
