How To Make an AJAX Poll

One annoying thing about many of the "old-fashioned" style polls which most sites still use is that you must reload an entire page just to submit one little vote. This can be time consuming for people on limited bandwidth, or on sites that it would just be plain impractical to reload the content.

First of all this tutorial will not teach the underlying concepts of AJAX, merely show you how to use it specifically. If you are looking to learn how to use AJAX I suggest you read the tutorial "Retrieving database information with AJAX, PHP and MySQL".

Before we start, here's a sneak peak at the final product: Ajax Poll.

To begin with, we'll set up two MySQL tables: results, and ips. Here are the MySQL queries for both:

CREATE TABLE `results` (
  `id` bigint(20) NOT NULL AUTO_INCREMENT,
  `option` varchar(255) NOT NULL,
  `count` bigint(20) NOT NULL DEFAULT '0',
  KEY `id` (`id`)
)
CREATE TABLE `ips` (
`ip` VARCHAR( 255 ) NOT NULL ,
`time` INT NOT NULL
)

The first table "results" has three fields, id, option, and count. Id is simple for identification purposes, option is the name of the option in question, and count is the amount of votes that option received. Each option you wish to have in your poll would have its own row in that table. Further down you will find a simple script to administrate your poll.

Next we need a file that will be accessed by AJAX to add a vote, and retrieve the total votes. This will use PHP to query our mysql tables.

<?php

//We'll call this file vote.php

$id = $_GET['id']; //This is the id of the option the user voted for retrieved through GET

mysql_connect("localhost", "mysql_user", "mysql_password"); //Connect to the MySQL server with your host (probably localhost), your mysql username, and your mysql password
mysql_select_db("mysql_db"); //Select your MySQL database by name

$ip = $_SERVER['REMOTE_ADDR']; //The user's IP address
$query = mysql_query("SELECT * FROM ips WHERE ip = '$ip'") or die("n"); //Query to see if there is already a submission from that IP
if( mysql_num_rows($query) ) //If there has been a submission by that IP already...
{
  die("n"); //End the script and print out "n"
}

$query = mysql_query("SELECT * FROM results WHERE id = $id") or die("n"); //Select the row (option) with the same id as the voteID
if( mysql_num_rows($query) == 1 ) //If there is 1 row found with that id...
{
  mysql_query("UPDATE results SET count = count + 1 WHERE id = $id") or die("n"); //Update the row to add 1 to the count field
  mysql_query("INSERT INTO ips (ip, time) VALUES ('$ip', ". time(). ")") or die("n"); //Insert the user's IP into the database so they can't vote again
  $query2 = mysql_query("SELECT * FROM results WHERE id = $id") or die("n"); //Same as original query to get the new value of count
  if( mysql_num_rows($query2) == 1 ) //If there is 1 row found with that id...
  {
    $row = mysql_fetch_assoc($query2); //Use $row as the associative fetching key
    $count = $row['count']; //$count is now the value of the count field for the option's row
  }
  $updated = "y"; //If we got to here, it means that the row has been updated so we set this variable to "y" which will be echoed out to tell our AJAX script whether or not it worked
}
else
{
  $updated = "n"; //Same deal except this would only be gotten to if we did not successfully update so it's set to "n"
}

echo $updated. $count; //Echo out "y" or "n" and the new count

?>

As I'm sure you can gather from the comments this script the goal is to add one vote to the option the user has voted for, then retrieve the new amount of votes for that option. The final result is either going to be "n" or "y#" (# representing the new amount of votes). The only way the output would be "n" would be if the user somehow voted for something that didn't exist, there was a database error, or they previously had voted.

We now have all the server-side coding complete for the updating and retrieving, so now we need to get the AJAX setup so that these can be used. This is the JavaScript that will be on the page that contains the poll.

function vote(id){
var xmlhttp=false; //Clear our fetching variable
        try {
                xmlhttp = new ActiveXObject('Msxml2.XMLHTTP'); //Try the first kind of active x object…
        } catch (e) {
                try {
                        xmlhttp = new
                        ActiveXObject('Microsoft.XMLHTTP'); //Try the second kind of active x object
            } catch (E) {
                xmlhttp = false;
                        }
        }
        if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
                xmlhttp = new XMLHttpRequest(); //If we were able to get a working active x object, start an XMLHttpRequest
        }
        var file = 'vote.php?id='; //This is the path to the file we just finished making
    xmlhttp.open('GET', file + id, true); //Open the file through GET, and add the id we want to retrieve as a GET variable
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4) { //Check if it is ready to recieve data
                var content = xmlhttp.responseText; //The content data which has been retrieved
                if( content != 'n' ){ //If the response was not "n" (meaning it worked)
                      content = content.replace('y', ''); //Get rid of the y infront of our result *
                                          document.getElementById('option' + id).innerHTML = content; //Set the inner HTML of the div with the old value in it to the new value **
                }
        }
        }
        xmlhttp.send(null) //Nullify the XMLHttpRequest
return;
}

As you can see it is not very different compared to simple retrieval, because most of what we are doing is server-side. I only have two things I wanted to explain further, marked by the stars by their comments.

*
content = content.replace('y', '');

I just starred this to make sure that everyone could understand what was going on. If we got to this stage in the script, it means that we would get a result that looked like "y#", when all we wanted was the "#". This just replaces the "y" with nothing so that only the number remains.

**
document.getElementById('option' + id).innerHTML = content;

I starred this just because I wanted to create a mental image of what it was. Each value for "votes" will be displayed in its own div, so that when it is voted for we can just replace the inner HTML of that div with the new value.

We now need to originally display this data using PHP. This code will be embedded into the document somewhere. I warn you it's not very pretty to look out (the echoed out result), however it is easy to modify it to fit your own site!

<?php

mysql_connect("localhost", "mysql_user", "mysql_pass"); //Connect to the MySQL server with your host (probably localhost), your mysql username, and your mysql password
mysql_select_db("db_name"); //Select your MySQL database by name

$query = mysql_query("SELECT * FROM results ORDER BY count DESC") or die(mysql_error()); //Query all possible options ordering by total votes
if( mysql_num_rows($query) ) //If there are any results to show...
{
  while( $row = mysql_fetch_array($query) ) //Begin a loop to echo out each option
  {
    echo '<br /><strong>'. $row['option']. ' <a href="javascript:vote('. $row['id']. ')">Vote!</a></strong><div id="option'. $row['id']. '">'. $row['count']. '</div>'; //Echo out each option, vote link, and total votes
  }
}
else
{
  echo "<p>Sorry, there are no options to vote for!</p>"; //Otherwise we echo out that message
}

?>

Now here is a SAMPLE page. You would most likely not want to have your page looking like this as it is quite boring. It is very easy though to take the pieces of code as examples and incorporate them into your own design. I'm just displaying this so that you can see the whole script in action.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Look! A Poll!</title>
<script language="javascript" type="text/javascript">
function vote(id){
var xmlhttp=false; //Clear our fetching variable
        try {
                xmlhttp = new ActiveXObject('Msxml2.XMLHTTP'); //Try the first kind of active x object…
        } catch (e) {
                try {
                        xmlhttp = new
                        ActiveXObject('Microsoft.XMLHTTP'); //Try the second kind of active x object
            } catch (E) {
                xmlhttp = false;
                        }
        }
        if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
                xmlhttp = new XMLHttpRequest(); //If we were able to get a working active x object, start an XMLHttpRequest
        }
        var file = 'vote.php?id='; //This is the path to the file we just finished making
    xmlhttp.open('GET', file + id, true); //Open the file through GET, and add the id we want to retrieve as a GET variable
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4) { //Check if it is ready to recieve data
                var content = xmlhttp.responseText; //The content data which has been retrieved
                if( content != 'n' ){ //If the response was not "n" (meaning it worked)
                      content = content.replace('y', ''); //Get rid of the y infront of our result *
                                          document.getElementById('option' + id).innerHTML = content; //Set the inner HTML of the div with the old value in it to the new value **
                }
        }
        }
        xmlhttp.send(null) //Nullify the XMLHttpRequest
return;
}
</script>
</head>

<body>
<p>Question? <!-- Replace with your actual question of course! --></p>
<?php

mysql_connect("localhost", "mysql_user", "mysql_pass"); //Connect to the MySQL server with your host (probably localhost), your mysql username, and your mysql password
mysql_select_db("db_name"); //Select your MySQL database by name

$query = mysql_query("SELECT * FROM results ORDER BY count DESC") or die(mysql_error()); //Query all possible options ordering by total votes
if( mysql_num_rows($query) ) //If there are any results to show...
{
  while( $row = mysql_fetch_array($query) ) //Begin a loop to echo out each option
  {
    echo '<br /><strong>'. $row['option']. ' <a href="javascript:vote('. $row['id']. ')">Vote!</a></strong><div id="option'. $row['id']. '">'. $row['count']. '</div>'; //Echo out each option, vote link, and total votes
  }
}
else
{
  echo "<p>Sorry, there are no options to vote for!</p>"; //Otherwise we echo out that message
}

?>
</body>
</html>

And there you have it! You now have all the skill to make your own displayable poll! This next part is optional, and it is just some PHP scripts that show you how you could add and delete options through your own little admin panel.

<?php

//Name this file whatever you want (.php of course ;) )

mysql_connect("localhost", "mysql_user", "mysql_password"); //Connect to the MySQL server with your host (probably localhost), your mysql username, and your mysql password
mysql_select_db("db_name"); //Select your MySQL database by name

$del = intval($_GET['del']); //Retrieve the integer value of del through GET
if( $del ) //If there is actually something in the del variable...
{
  mysql_query("DELETE FROM results WHERE id = '$del'") or die(mysql_error()); //Delete the option with that id
  echo "<p>Thank you, the option you chose to delete was deleted.</p>"; //Echo out that message <--
}

if( $_POST['addOption'] ) //If the form for a new option has been submitted...
{
  $option = addslashes($_POST['addOption']);
  mysql_query("INSERT INTO `results` (`option`) VALUES ('$option')") or die(mysql_error()); //Insert a new row for that option
  echo "<p>Thank you, your option has been added!</p>"; //Echo out that message <--
}

$query = mysql_query("SELECT * FROM results") or die(mysql_error()); //Query all of the options
if( !mysql_num_rows($query) ) //If no rows are found...
{
  echo "<p>There are no options currently in the database.</p>"; //Echo out that there are none to be found
}
else
{
  while( $row = mysql_fetch_array($query) ) //Set up a loop for the query using $row as the fetching variable
  {
    echo "<p>". $row['option']. " - <a href=\"?del=". $row['id']. "\">delete</a></p>"; //Echo out each option with a delete link
  }
}

echo "<form name=\"add\" method=\"post\" action=\"$PHP_SELF\">
<p><input type=\"text\" name=\"addOption\" /><input type=\"submit\" name=\"addSubmit\" value=\"Submit\" /></p>
</form>";

?>

Tips for modification

The main thing you would need to modify for this script would be the display because it is designed for utter simplicity. What you would want to change would be anything that is being displayed through echo. If you have a basic knowledge of HTML you should be able to change the various echoed out strings to fit your layout.