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

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 !

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

$(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);
	};
	
});

$(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);

};

});

CSS

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;
}

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 style="height: 0px; margin-bottom: 8px;" align="left">
<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 checked="checked" name="user_rating" type="radio" value="good"> Good <br><input name="user_rating" type="radio" value="bad"> Not Good <br><input name="user_rating" type="radio" value="average"> Average <br><input id="Send" type="button" value="Send"></div>
</div>

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

</div>

<div id="options"><input checked="checked" name="user_rating" type="radio" value="good"> Good <br><input name="user_rating" type="radio" value="bad"> Not Good <br><input name="user_rating" type="radio" value="average"> Average <br><input id="Send" type="button" value="Send"></div>

</div>

Downloads files to get this latest tutorial.

Database Structure

JQuery Code

CSS

HTML

Few More Brilliant Posts !