Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy ajax help - complete newbie

    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.

  • #2
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    no idea guys? is there anything more you want me to explain? im happy to do so.

  • #3
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    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.

  • #4
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    Code:
    http.onreadystatechange=function() {
         if(http.readyState == 4) {
              document.getElementById('rate').innerHTML = http.responseText;
         }
    }
    thats the part that is confusing me (as a ajax newbie) .
    Last edited by crusoe85; 02-11-2009 at 10:13 PM.

  • #5
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    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

  • #6
    New to the CF scene
    Join Date
    Feb 2009
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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_su...ion.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.

  • #7
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    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.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •