View Full Version : ajax help - complete newbie

02-10-2009, 04:54 PM
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

<html xmlns="http://www.w3.org/1999/xhtml">
<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;

<!--votes are stored as a running total and count -->
<cfquery name='q1' datasource='######'>
select total_votes, total_value from ratings where id=2

<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>

this is my rate_submission.cfm page (updates the database depending on which star was clicked)

<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

im currently working on it at www.critsesh.com/star. i have to refresh the page to see the effects.

02-11-2009, 11:23 AM
no idea guys? is there anything more you want me to explain? im happy to do so.

02-11-2009, 02:25 PM
mkay... first off (and i can't even count how many times i've said this at this point) go get firebug for firefox. you'll be able to monitor the entire ajax transaction and see where it stops doing what you think it should. once you've identified this point we can troubleshoot.

02-11-2009, 11:09 PM
i have firebug installed but im not sure how to go about tracking ajax with it. can you help me there?
i'd like it that when i click a star it updates the database (have that part working) but then it shows the updated stars afterward.

http.onreadystatechange=function() {
if(http.readyState == 4) {
document.getElementById('rate').innerHTML = http.responseText;

thats the part that is confusing me (as a ajax newbie) .

02-12-2009, 03:50 PM
once you have firebug, bring it up and watch the console. when you make the transaction it'll show you the entire thing. you'll be able to see if it's returning what you expect\want etc

02-12-2009, 05:44 PM
ok. ive looked at the console and when i click on the 5th star for example i get this:

its calling GET http://www.critsesh.com/star/vote_submission/rate_submission.cfm?rate=5

Params: rate 5

in the response tab though nothing is returned. I'm not returning anything. which is what im confused about. if i want to update the stars after a click what should i return? and how?

I appreciate you helping me out on this mate.

02-13-2009, 05:37 PM
ok, i just glanced up at your original code. you display the stars based on class name, correct?

so based on what the backend page finds, it could return the class. then, apply class to reflect the new ranking.