jPoll, with an accompanying nettuts+ screencast, provides a ‘poll’ widget which can be used to ask your visitors a brief question. The widget will create and render a form inside a designated container and then monitor the form for submission.

When the form is submitted,the results are passed to a backend file which processes the response (I used PHP and MySQL, although other languages and database servers are available). The widget is just the frontend of the application, you must supply the backend.

Once the visitor’s choice has been saved, the results of the poll are then passed back to the widget as a JSON object and the widget displays the results using nice animations.

Example

Features

The first release of jPoll comes with the following features:

• Automatic error message for submission before choice is made
• AJAX sending and receiving of selection and results
• Built-in result animations

Usage

All you need to do on the webpage is supply a container element with an id:

<div id="container"></div>

Then in your script, just call the jPoll constructor supplying a literal configuration object containing the customised properties:

$("#container").jPoll({ ajaxOpts.url: "myBackend.php", groupIDs: ["A Question", "Another Question", "Etc..."] });

All of the properties have defaults, but some are fairly generic. The config section below shows all of the properties and their default values.

Note that this is just the front-end – you must have a database setup to store the results in and you need an accompanying PHP script that gets and set the results in the database.

Config

var config = {
  ajaxOpts.url: "a string" //defaults to "poll.php"
  groupName: "a string" //defaults to "choices"
  groupIDs: ["an array"] //defaults to ["choice0", "choice1", "choice2", "choice3", "choice4"]
  pollHeading: "a string" //defaults to "Please choose your favourite:"
  rowClass: "a string" //defaults to "row"
  errors: true || false //defaults to true
}

$("#container").jPoll(config);

Example PHP

The PHP used in conjunction with this example stores the results of the poll in a MySql database, but if you wanted you could do anything you wanted with the data. Here is the PHP used in this example:

<?php

	//db connection details
	$host = "localhost";
	$user = "username";
	$password = "password";
	$database = "database_name";

	//make connection
	$server = mysql_connect($host, $user, $password);
	$connection = mysql_select_db($database, $server);

	//get post data
	$selected = mysql_real_escape_string($_POST['choice']);

	//update table
	mysql_query("UPDATE results SET votes = votes + 1 WHERE choices = '$selected'");

	//query the database
	$query = mysql_query("SELECT * FROM results");

	//loop through and return results
	for ($x = 0, $numrows = mysql_num_rows($query); $x < $numrows; $x++) {
    	$row = mysql_fetch_assoc($query);

		//make array
		$json[$x] = array("choice" => $row["choices"], "votes" => $row["votes"]);
	}

	//echo results
	echo json_encode($json);

	//close connection
	mysql_close($server);

?>

At the top of the code we’ve got a bunch of variables needed to make the database connection. Following this we make the connection to the database and get the choice that was sent to the server, using mysql_real_escape_string() to ensure no sql commands have been added to the string. Next we update the database with the new result, before querying the database to get the updated result.

Following this we build an array of each of the poll rows and their values, before encoding the array as JSON and sending it back to the page to be displayed.

It’s quite simple, and probably the most simple code that could be used and still have it work

Enjoy!

• jQuery, plugin
• |Comments feed: RSS 2.0
• |Trackback: trackback
• |Respond