Aug

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

ZeeShaN

AJAX, JQuery, MySQL, PHP, Web Design Tags

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 !

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

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

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

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>

Downloads files to get this latest tutorial.