jQuery Plugin – jPoll

May 26, 2019

Download the plugin here: jPoll 1.0, but please be advised this is now a considerably old plugin.

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!

16 Responses to “jQuery Plugin – jPoll”

  1. I can see that you are an expert at your field! I am launching a website soon, and your information will be very useful for me.. Thanks for all your help and wishing you all the success in your business.

  2. jason says:

    Thanks. But how about some insight into the back-end code. Can you add your PHP code to this? Can you also store the results in a TXT file or XML doc?

  3. Dan Wellman says:

    I added the PHP code and a brief explanation above, hope it helps.

    You could store the results in a txt or xml file if you wanted, PHP is quite capable of doing this, but a database is probably the best overall storage solution. You could get locks on a file-based storage medium if more than one person completed the poll at once…

  4. Tony says:

    Can you send me a zip file with the resourse files ??

    :P

    Tnx..

    Excellente Work…

  5. Dan Wellman says:

    sure, email on it’s way…

  6. john smit says:

    Thanks for offering your theme. I love it. I have used a customized header (to go with the theme of my book) but then lost the navigation bar. Help. I also want to center my title on the header but when I do, everything on the page gets centered. Thanks so much.
    http://recreationxleisure.com/

  7. click says:

    This is often a amazing blog, could you be interested in working on an interview concerning just how you developed it? If so e-mail me personally!

  8. Sony says:

    Can you send me a zip file with the resourse files ??

  9. Dan Wellman says:

    Sure, I’ll try and do this later today, I’m at work at the moment, but I’ll grab the files for you tonight :)

  10. Srinivas says:

    Happy New Year.

    Thanks for posting this. I need to implement something like this.

    Please send me the zip file when you get a chance

    Srinivas

  11. Dan Wellman says:

    I’ve added a zip containing all the plugin files to the post, enjoy :)

  12. Wesley Lachenal says:

    You just saved a young lad’s life! thanks!

  13. Ashwini says:

    Dan:
    Can you send me the zip file.
    Thanks
    BTW: Great work

  14. Dan Wellman says:

    There’s a link to the zip file at the top of the post :)

Leave a Reply

My Books