How To Make an AJAX Thumbs Up or Down Script

Today am going to show you how easy it is to make an vote up or down script with PHP and JQuery.

Here is what we are going to use:

  • button tags for the up or down vote
  • a page with a list of articles which we can vote up or down
  • two php scripts one for up and one for down

What You Need To Know About Button Tags

You might be surprised, as I was when I found out, that button tags can have a “value” attribute, we will use this value to refer to a unique id for each of our articles.

We will have two buttons for each article, one for up and down votes. The buttons will have the class “up” or “down” respectively.

Buttons Example:

These buttons will belong to a post with an id of 1.

		<button value="1" class="up">Vote Up</button>
		<button value="1" class="down">Vote Down</button>

How The List of Items Looks Like

I wrapped each of my articles in a fieldset tag. The code of each of my items looks like this.

	<fieldset>
	<h2>Post 1</h2>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. In lectus lorem, semper eu vulputate id, porttitor ac augue. Integer luctus placerat purus at blandit. Fusce adipiscing ligula id libero ultrices mattis. Mauris commodo elit eget justo dictum pellentesque. Cras sed pulvinar lacus. Quisque tellus lectus, fermentum vitae fringilla vel, dignissim ut tortor. Donec congue, lorem sed commodo pellentesque, magna mi ullamcorper nisi, sit amet imperdiet sem orci ac odio. Nulla eros tellus, laoreet sit amet laoreet quis, ullamcorper non nunc.
		<p>
		<button value="1" class="up">Vote Up</button>
		<button value="1" class="down">Vote Down</button>
		</p>
	</fieldset>

So make copy and paste a couple of these in your page, don’t forget to change the values in your buttons!

A list of items which can be voted up or down

We will also need a division where our response will be displayed. Add this tag at the top of your page.

	<div id="response">

	</div>

The CSS

I want the response to stick to the top of the page, even while the user scrolls up or down, we do this by using a fixed position. We will use JQuery to toggle the response division on and off so don’t worry about it messing up your layout.

	div#response
	{
	position: fixed;
	background: #000000;
	color: #ffffff;
	width: 100%;
	top: 20%;
	}
	
	button{
	cursor: pointer;
	}

The JQuery

We use the same page where you display the list of items to be voted on.

Include JQuery and have the document ready:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		// all jquery code will go here
	});
</script>

I created three variables, two for the up and down script file names and another one for the item id

var postID;
var voteDownScript='voteDown.php';
var voteUpScript='voteUp.php';

We will need two almost identical click actions, one for when people click an up button and another one for when they click a down button.

Let me walk you through the process:

  1. User clicks button (up or down)
  2. JQuery executes the correct click action, depending on the button’s class (up or down)
  3. We get the item’s id using $(this).val()
  4. We send the id to the up or down script.
  5. The response is displayed in the response div
  6. The button the user clicked is disabled

So here is the code that does all that:
Learn About JQuery and AJAX in Detail

// vote up
 $("button.up").click(function(){ // when people click an up button
	$("div#response").show().html('<h2>voting, please wait...</h2>'); // show wait message

	itemID=$(this).val(); // get post id

	$.post(voteUpScript,{id:itemID},function(response){ // post to up script
		$("div#response").html(response).hide(3000); // show response
	});

	$(this).attr({"disabled":"disabled"}); // disable button
 });

 // vote down
 $("button.down").click(function(){
	$("div#response").show().html('<h2>voting, please wait...</h2>');

	itemID=$(this).val();
	$.post(voteDownScript,{id:itemID},function(response){ // post to down script
		$("div#response").html(response).hide(3000); // show response
	});
	$(this).attr({"disabled":"disabled"}); // disable button

 });

The PHP Scripts

We are ready to receive the item id’s in a script. They are in the POST array with the index "id"

voteUp.php

$id=$_POST['id'];

echo '<h2>PHP Response: You voted post '.$id.' up</h2>';

voteDown.php

$id=$_POST['id'];

echo '<h2>PHP Response: You voted post '.$id.' down</h2>';

It’s up to you how to store the votes, one way would be to use a database and increment the votes field by one. I would use two fields, one for up and down votes.

The Result

httpv://www.youtube.com/watch?v=rix70K0LiI0

blog comments powered by Disqus