need ajax help

[andrewliu]

Hello,

I have a button that counts the number of clicks. when it is clicked, number goes up, and the image disappears. but I want it to show the image again when it is clicked, but can't be clicked after the first time is clicked. I already have this script but I tried adding some codes in but doesn't work. I was wondering if someone can help me out?

Thank you

$(function(){
	$("a.product_ratings").click(function(){
	//get the id
	the_id = $(this).attr('id');
	thumbsUp = $(this).attr('id');
	
	// show the spinner
	$(this).parent().html("<img src='images/spinner.gif'/>");
	//show the thumbsup
	$(this).parent().html("<img src='images/yes-enb.JPG'/>");
	
	//fadeout the vote-count 
	$("span#votes_count"+the_id).fadeOut("fast");
	
	//the main ajax request
		$.ajax({
			type: "POST",
			data: "action=product_ratings&id="+$(this).attr("id"),
			url: "votes2.php",
			success: function(msg)
			{
				$("span#votes_count"+the_id).html(msg);
				//fadein the vote count
				$("span#votes_count"+the_id).fadeIn();
				//remove the spinner
				$("span#vote_buttons"+the_id).remove();
				//fadein the thumbsup
				$("span#votes_count"+thumbsUp).fadeIn();
			}
		});
	});

[Airshow]

Andrew,

Is thumbsUp supposed to be different from the_id ? They are currently identical :

the_id   = $(this).attr('id');
thumbsUp = $(this).attr('id');

The second line here will immediately override the first. The spinner will never show :

// show the spinner
$(this).parent().html("<img src='images/spinner.gif'/>");
//show the thumbsup
$(this).parent().html("<img src='images/yes-enb.JPG'/>");

Why $(this).attr("id") again? You already have the value stored as the_id (and thumbsUp) :

//data: "action=product_ratings&id="+$(this).attr("id"),
data: "action=product_ratings&id=" + the_id,

By removing the button from the DOM, it will not be available for the user to click again. If you want user to be able to vote again, then delete this line :

//$("span#vote_buttons"+the_id).remove();

Airshow

[andrewliu]

Hello!

Thank you for the quick response.

I wanted to have different variables and I'm new to ajax so I wasn't sure how to implement that.

I have

data: "action=product_ratings&id="+$(this).attr("id"),

because if I just put the_id, it doesn't work and gives me a syntax error on my program.

So how would I have my spinner show and then have my thumbsUp picture show and then disable clicking for the user after clicking it once.

[Airshow]

I wanted to have different variables and I'm new to ajax so I wasn't sure how to implement that.

You only need different variables if they have (or will have) different values, or if the variables are in different scopes (normally avoidable).

I have

data: "action=product_ratings&id="+$(this).attr("id"),

because if I just put the_id, it doesn't work and gives me a syntax error on my program.

It's a minor point, but as far as I can see, there's no reason that :

data: "action=product_ratings&id=" + the_id,

should cause a syntax error. In addition, the_id is in scope so it should yield the correct value.

So how would I have my spinner show and then have my thumbsUp picture show and then disable clicking for the user after clicking it once.

On paper, tabulate objects against phases, as follows :

1. Phase 1: Objects that should [show|not show] before vote is cast
2. Phase 2: Objects that should [show|not show] while vote is being cast
3. Phase 3: Objects that should [show|not show] after vote has been cast

Then work out which block of code corresponds to each phase. HINT: Phase 1 is the initial condition (for users who have not yet voted). Only Phase 2 and Phase 3 belong inside your $(function().....).

It should then be fairly simple to work out what statements belong in each block.

Another hint: "Spinner" and "thumbs up" images can both be put in place initially, then controlled with .show()/.hide() without needing to use .html() to change the image.

Airshow

[andrewliu]

For phase 1, i used CSS background image to implement the show before vote is casted, and the phase 2 i was able to implement. when clicked, the image fades out and then spinner appears and then disappears, then i'm trying to finally show the image of thumbsup after casting which is phase 3.

blah i'm trying and i can't get it right :( i'm just not familiar with a lot of the ajax syntax.

[andrewliu]

I tried adding a little piece of code in that I thought seems logical because of the fadeOut, but its not working

$(function(){
	$("a.product_ratings").click(function(){
	//get the id
	the_id = $(this).attr('id');
	
	// show the spinner
	$(this).parent().html("<img src='images/spinner.gif'/>");

	
	//fadeout the vote-count 
	$("span#votes_count"+the_id).fadeOut("fast");
	
	//the main ajax request
		$.ajax({
			type: "POST",
			data: "action=product_ratings&id="+the_id,
			url: "votes2.php",
			success: function(msg)
			{
				$("span#votes_count"+the_id).html(msg);
				//fadein the vote count
				$("span#votes_count"+the_id).fadeIn();
				//remove the spinner
				$("span#vote_buttons"+the_id).remove();
				

			}
		});
	//fadein the image
	$("span#votes_count"+the_id).fadeIn();
	});

the

//fadein the image
	$("span#votes_count"+the_id).fadeIn();

is outside the ajax code. I was hoping it'll fade back in?

[Airshow]

Andrew,

To try out the code quickly I developed my own HTML and simulated AJAX. The main differences are that I used a table's <td>s in place of your spans, and a setTimeout() to provide a delay in lieu of the AJAX success handler.

The overall structure of the resulting .click function is rather similar to yours. Here's my page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Untitled</title>
<style type="text/css">
td.votes_count {
	width: 20px;
	text-align: center;
}
td.spinner {
  display: none;
}
img.spinner {
  width: 20px;
  height: 20px;
}
</style>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready( function() {
	var a = [];//Array to simulate server-side votes table in database
	$(".vote_button").click( function() {
		var $this = $(this); //for ecomnomy and scope.
		if(typeof $this.attr('inProgress') === 'undefined' || Number($this.attr('inProgress')) === 0) {
			$this.attr('inProgress', 1);
			var the_id = $this.attr("id");
			var votes_count = $("#votes_count" + the_id); //for ecomnomy.
			var spinner = $("#spinner" + the_id); //for ecomnomy.
			votes_count.hide();
			spinner.show();
			if(typeof a[the_id] === "undefined") { a[the_id] = 1; } else { ++a[the_id]; } //simulated server-side activity
			setTimeout( function() { //here I use setTimeout to simulate ajax delay
				var msg = a[the_id]
				votes_count.html(msg);
				votes_count.show();
				spinner.hide();
				$this.attr('inProgress', 0);
			}, 1000);
		}
	});
}); 

</script>
</head>

<body>

<table border>
<tr><th>Item 0 :</th><td id="votes_count0" class="votes_count">0</td><td id="spinner0" class="spinner" ><img id="spinnerImg0" class="spinner" src="images/spinner.gif" /></td><td><button id="0" class="vote_button">Vote</button></td></tr>
<tr><th>Item 1 :</th><td id="votes_count1" class="votes_count">0</td><td id="spinner1" class="spinner" ><img id="spinnerImg1" class="spinner" src="images/spinner.gif" /></td><td><button id="1" class="vote_button">Vote</button></td></tr>
<tr><th>Item 2 :</th><td id="votes_count2" class="votes_count">0</td><td id="spinner2" class="spinner" ><img id="spinnerImg2" class="spinner" src="images/spinner.gif" /></td><td><button id="2" class="vote_button">Vote</button></td></tr>
</table>


</body>
</html>

I found that .fadeOut()/.fadeIn() gave undesirable transitional effects so used .hide()/.show() . Your juxtapostioning of HTML <span> elements may better allow .fadeOut()/.fadeIn() to be used.

You will see that I added an "inProgress" test so that the user can't vote again while the voting process (AJAX in your case) is underway. However, further vote(s) can be cast when "inProgress" is withdrawn.

Airshow

[andrewliu]

oh wow. okay let me try to process and understand these codes.

thanks!