Super Ajax Polling/Voting System using JQuery, Ajax, PHP and MySQL

Author: Zeeshan Rasool | Last updated on December 10th, 2010

AJAX, JQuery, MySQL, PHP, Web Design

Polling system or Voting system is very common in web sites. Voting can be about your site or blog or some other thing just to get the user attention and get your idea about your product.
I always tries to provide the users of 99Points.info some common but useful scripts which makes their effort succeeded. So after some voting system tutorials like
Digg style Voting now I have come to simple ajax based polling system. This is another series of Jquery. Hope You like it and don’t forget to subscribe and give your feed back in comments. Thanks !

[ad#ad-3]

If you Like this Tutorial and Want to get New Tutorials news by Email, Then Subscribe Here.

[ad#co-2]

Database Structure

Copy this db structure as it is and paste in your mysql window.

CREATE TABLE IF NOT EXISTS `polling` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `liked` int(11) NOT NULL,
  `dislike` int(11) NOT NULL,
  `average` int(11) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

--
-- Dumping data for table `polling`
--

INSERT INTO `polling` (`id`, `liked`, `dislike`, `average`) VALUES
(1, 1, 1, 1);

CREATE TABLE IF NOT EXISTS `polling` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`liked` int(11) NOT NULL,

`dislike` int(11) NOT NULL,

`average` int(11) NOT NULL,

PRIMARY KEY (`id`)

) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

-- Dumping data for table `polling`

INSERT INTO `polling` (`id`, `liked`, `dislike`, `average`) VALUES

(1, 1, 1, 1);

CREATE TABLE IF NOT EXISTS `polling_ip` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `userip` varchar(100) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

--
-- Dumping data for table `polling_ip`
--

CREATE TABLE IF NOT EXISTS `polling_ip` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`userip` varchar(100) NOT NULL,

PRIMARY KEY (`id`)

) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

-- Dumping data for table `polling_ip`

JQuery Code

// <![CDATA[	
$(document).ready(function() {
	
	$('.totalstatsbutton').livequery("mouseenter", function(e){
		$('.tooltip3').show();
		$('.totalstats').fadeIn(200);
	}).livequery("mouseleave", function(e){
		$('.tooltip3').hide();
		$('.totalstats').fadeOut(200);
	});
});

$(document).ready(function(){	
	
	$('#Send').click(function(){
		
        var vote = $("input[@name='radio_name']:checked").val();
		showLoader();
		$.post("voting.php?value="+vote,{
		}, function(response){
			hideLoader();
			$('#wrap').html(unescape(response));				
		});
	});	
	
	//show loading bar
	function showLoader(){
		$('.search-background').fadeIn(200);
	}
	//hide loading bar
	function hideLoader(){
		$('.search-background').fadeOut(200);
	};
	
});

// <![CDATA[

$(document).ready(function() {

$('.totalstatsbutton').livequery("mouseenter", function(e){

$('.tooltip3').show();

$('.totalstats').fadeIn(200);

}).livequery("mouseleave", function(e){

$('.tooltip3').hide();

$('.totalstats').fadeOut(200);

});

$(document).ready(function(){

$('#Send').click(function(){

var vote = $("input[@name='radio_name']:checked").val();

showLoader();

$.post("voting.php?value="+vote,{

}, function(response){

hideLoader();

$('#wrap').html(unescape(response));

});

//show loading bar

function showLoader(){

$('.search-background').fadeIn(200);

}

//hide loading bar

function hideLoader(){

$('.search-background').fadeOut(200);

};

});

[ad#co-4]

CSS

/* CSS Document */
button {
	-moz-background-clip:border;
	-moz-background-inline-policy:continuous;
	-moz-background-origin:padding;
	-moz-border-radius-bottomleft:3px;
	-moz-border-radius-bottomright:3px;
	-moz-border-radius-topleft:3px;
	-moz-border-radius-topright:3px;
	background:#F6F6F6 none repeat scroll 0 0;
	border:1px solid #CCCCCC;
	cursor:pointer;
	float:left; margin-left:10px;
	height:2.0833em;
	overflow:visible;
	padding:0 0.5em;
	vertical-align:middle;
	white-space:nowrap;
}
#wrap{
	border:solid #e5eecc 1px; width:200px; background:#e5eecc;
	-moz-border-radius: 6px; 
	-webkit-border-radius: 6px;
	-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
	-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
}
.tooltip{ height:13px;display: none;width:120px; text-align:left;overflow:visible;opacity:0.7;filter:alpha(opacity=40)}
.tooltip2{ height:13px;display: none;width:140px; text-align:right; overflow:visible;opacity:0.7;filter:alpha(opacity=20)}
.tooltip3{ height:13px;display: none;width:270px; text-align:right; overflow:visible;opacity:0.7;filter:alpha(opacity=40)}

#poll_quiz{ font-family:Geneva, Arial, Helvetica, sans-serif; font-size:14px; color:#fff}
#poll_quiz label{ width:150px; border:solid #669933 1px; padding:5px; background-color:#669933;}

#options{ text-align:left; font-family:Geneva, Arial, Helvetica, sans-serif; font-size:12px; padding:6px;}

.totalstats{
		display: none;
		font-size: 0.8em;
		height:17px;
		padding:7px;
		-moz-border-radius: 6px; 
		-webkit-border-radius: 6px;
		-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
		-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
		text-align: left;
		text-decoration: none;
		width:60px;
		background-color:#333333;
		color:#FFFFFF;
		text-shadow: #fff 0px 0px 20px;
	}
	
.totalstatsbutton{ width:180px; vertical-align:top;background:#F6F6F6 none repeat scroll 0 0; height:40px; cursor:auto}
.totalstatsbutton .greenBar{background-color:#AADA37;  height:5px; margin-bottom:3px; height:6px;}		
.totalstatsbutton .redbar{background-color:#CF362F;  height:5px; margin-bottom:3px;height:6px;}		
.totalstatsbutton .bluebar{background-color:#0099CC;  height:5px; margin-bottom:3px;height:6px;}	


#poll_result{ text-align:center; padding-top:12px; vertical-align:bottom}
#poll_result label{ float:left;font-family:Geneva, Arial, Helvetica, sans-serif; font-size:12px; width:49px;}
#poll_result div{ float:left}
#poll_result .greenBar2{background-color:#AADA37;  width:20px; margin-left:40px; height:6px;}	
#poll_result .redbar2{background-color:#CF362F;  width:20px; margin-left:26px;height:6px;}		
#poll_result .bluebar2{background-color:#0099CC;  width:20px; margin-left:26px;height:6px;}	

#voting_result{ border:solid #666666 1px; height:120px; margin-top:19px;-moz-border-radius: 6px; 
		-webkit-border-radius: 6px; width:500px; margin-left:12px; display:none
		}

#Send{ border:#CC0000 solid 1px;width:60px; background:#CC0000; color:#FFFFFF; cursor:pointer; padding:4px 12px 4px 12px; margin:10px 8px 6px 6px;}

.search-background {
		display: none;
		font-size: 13px;
		font-weight: bold;
		height:100px;
		position: absolute;
		padding-top:80px;
		-moz-border-radius: 6px; 
		-webkit-border-radius: 6px;
		-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
		-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
		text-align: center;
		opacity:0.5;filter: alpha(opacity=50) ;
		text-decoration: none;
		width:200px;
	}
	
.search-background {
		 background:#999999;
		color:#FFFFFF;
		text-shadow: #fff 0px 0px 20px;
	}

search-background label{	

	border:solid #66FF00 1px;
}

/* CSS Document */

button {

-moz-background-clip:border;

-moz-background-inline-policy:continuous;

-moz-background-origin:padding;

-moz-border-radius-bottomleft:3px;

-moz-border-radius-bottomright:3px;

-moz-border-radius-topleft:3px;

-moz-border-radius-topright:3px;

background:#F6F6F6 none repeat scroll 0 0;

border:1px solid #CCCCCC;

cursor:pointer;

float:left; margin-left:10px;

height:2.0833em;

overflow:visible;

padding:0 0.5em;

vertical-align:middle;

white-space:nowrap;

}

#wrap{

border:solid #e5eecc 1px; width:200px; background:#e5eecc;

-moz-border-radius: 6px;

-webkit-border-radius: 6px;

-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);

-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);

}

.tooltip{ height:13px;display: none;width:120px; text-align:left;overflow:visible;opacity:0.7;filter:alpha(opacity=40)}

.tooltip2{ height:13px;display: none;width:140px; text-align:right; overflow:visible;opacity:0.7;filter:alpha(opacity=20)}

.tooltip3{ height:13px;display: none;width:270px; text-align:right; overflow:visible;opacity:0.7;filter:alpha(opacity=40)}

#poll_quiz{ font-family:Geneva, Arial, Helvetica, sans-serif; font-size:14px; color:#fff}

#poll_quiz label{ width:150px; border:solid #669933 1px; padding:5px; background-color:#669933;}

#options{ text-align:left; font-family:Geneva, Arial, Helvetica, sans-serif; font-size:12px; padding:6px;}

.totalstats{

display: none;

font-size: 0.8em;

height:17px;

padding:7px;

-moz-border-radius: 6px;

-webkit-border-radius: 6px;

-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);

-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);

text-align: left;

text-decoration: none;

width:60px;

background-color:#333333;

color:#FFFFFF;

text-shadow: #fff 0px 0px 20px;

}

.totalstatsbutton{ width:180px; vertical-align:top;background:#F6F6F6 none repeat scroll 0 0; height:40px; cursor:auto}

.totalstatsbutton .greenBar{background-color:#AADA37; height:5px; margin-bottom:3px; height:6px;}

.totalstatsbutton .redbar{background-color:#CF362F; height:5px; margin-bottom:3px;height:6px;}

.totalstatsbutton .bluebar{background-color:#0099CC; height:5px; margin-bottom:3px;height:6px;}

#poll_result{ text-align:center; padding-top:12px; vertical-align:bottom}

#poll_result label{ float:left;font-family:Geneva, Arial, Helvetica, sans-serif; font-size:12px; width:49px;}

#poll_result div{ float:left}

#poll_result .greenBar2{background-color:#AADA37; width:20px; margin-left:40px; height:6px;}

#poll_result .redbar2{background-color:#CF362F; width:20px; margin-left:26px;height:6px;}

#poll_result .bluebar2{background-color:#0099CC; width:20px; margin-left:26px;height:6px;}

#voting_result{ border:solid #666666 1px; height:120px; margin-top:19px;-moz-border-radius: 6px;

-webkit-border-radius: 6px; width:500px; margin-left:12px; display:none

}

#Send{ border:#CC0000 solid 1px;width:60px; background:#CC0000; color:#FFFFFF; cursor:pointer; padding:4px 12px 4px 12px; margin:10px 8px 6px 6px;}

.search-background {

display: none;

font-size: 13px;

font-weight: bold;

height:100px;

position: absolute;

padding-top:80px;

-moz-border-radius: 6px;

-webkit-border-radius: 6px;

-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);

-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);

text-align: center;

opacity:0.5;filter: alpha(opacity=50) ;

text-decoration: none;

width:200px;

}

.search-background {

background:#999999;

color:#FFFFFF;

text-shadow: #fff 0px 0px 20px;

}

search-background label{

border:solid #66FF00 1px;

}

HTML

<div id="poll_quiz"><label>Vote about 99Points.info</label></div>
	
	<div id="wrap">
		<div class="search-background">
			<label><img src="loading.gif" alt="" /></label>
		</div>

		<div align="left" style="height:0px; margin-bottom:8px;">
			<div class="tooltip3">
				<?php include ('update_tooltip.php')?>
			</div>
		</div>
			
		<br clear="all" />
		
		<div id="update_count">
			<?php include ('update_box.php')?>
		</div>
		
		<br clear="all" />
		<div id="options">
			<input type="radio" name="user_rating" checked="checked" value="good" /> Good
			<br />
			<input type="radio" name="user_rating" value="bad" /> Not Good
			<br />
			<input type="radio" name="user_rating" value="average" /> Average
			<br />
			<input value="Send" type="button" id="Send">
			
		</div>
	</div>

<div id="poll_quiz"><label>Vote about 99Points.info</label></div>

</div>

<?php include ('update_tooltip.php')?>

</div>

<?php include ('update_box.php')?>

</div>

<input type="radio" name="user_rating" checked="checked" value="good" /> Good

<br />

<input type="radio" name="user_rating" value="bad" /> Not Good

<br />

<input type="radio" name="user_rating" value="average" /> Average

<br />

</div>

Downloads files to get this latest tutorial.
[ad#ad-3]

Recommended WordPress Themes Store

If you enjoyed this post, please consider leaving a comment below or subscribing to the RSS feed to have future articles delivered to your feed reader. You can also follow us on Facebook or Twitter @99Points

This awesome post has been created by 99Points editor's team. You can follow our updates on Twitter and facebook, OR drop an email at 99points.info@gmail.com