สร้าง poll แบบสำรวจ ด้วย ajax ใน jQuery อย่างง่าย

เขียนเมื่อ 10 ปีก่อน โดย Ninenik Narkdee
poll jquery ajax

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ poll jquery ajax





ตัวอย่าง

สร้าง poll แบบสำรวจ ด้วย ajax ใน jQuery อย่างง่าย

Code ตัวอย่าง

 

<?php
// สร้างฟังก์ชันเขียนไฟล์
function write($path, $content, $mode="w+"){
    if (file_exists($path) && !is_writeable($path)){ return false; }
    if ($fp = fopen($path, $mode)){
        fwrite($fp, $content);
        fclose($fp);
    }
    else { return false; }
    return true;
}
// การใช้งาน โมดเขียนไฟล์เริ่มต้น  w+ 
//write("poll1.txt","ทดสอบ","w+");
if($_GET['voteID']!=""){
header("Content-type:text/html; charset=UTF-8");     
header("Cache-Control: no-store, no-cache, must-revalidate");    
header("Cache-Control: post-check=0, pre-check=0", false);  		
	$gPoll=file("poll1.txt");
	$newData="";
	$chartTitle="";
	$numRowChart=$_GET['startKey']-1;
	foreach($gPoll as $key=>$value){
		if($key==0){
			$chartTitle=trim($value);
		}
		if($_GET['voteID']+$_GET['startKey']==$key){
			$value=intval($value)+1;
			$newData.=$value."\r\n";
		}else{
			$newData.=$value;
		}
	}
	write("poll1.txt",$newData,"w+");
?>
{
	"ChoiceTitle":[
<?php  
$gPoll=file("poll1.txt");
foreach($gPoll as $key=>$value){
	if($key>0 && $key<$_GET['startKey']){
?>
    	{"choiceData":"<?=trim($value)?> (<?=trim($gPoll[$key+$_GET['startKey']])?>)","score":<?=trim($gPoll[$key+$_GET['startKey']])?>},
<?php
	}
}
?>
    ],
    "chartTitle":"<?=trim($chartTitle)?>",
    "numRowsChart":<?=$numRowChart?>
    
}
<?php
	exit;
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ajax poll jquery google</title>
<style type="text/css">
body{
	font-family:Tahoma, Geneva, sans-serif;
	font-size:12px;	
}
#pollDiv{
	display:block;
	width:200px;
	height:250px;
	background-color:#F4F4F4;	
}
</style>

</head>

<body>

<!--Div that will hold the pie chart--> 
    <div id="chart_div"></div> 


<div id="pollDiv">
<?php
$gPoll=file("poll1.txt");
foreach($gPoll as $key=>$value){
	if($key==0){
		echo "<strong>".$value."</strong><br>";
	}else{
		if(trim($value)!=""){
			echo '<input type="radio" name="choice" id="radio" value="'.$key.'" />';
			echo $value."<br>";
		}else{
			echo '<input type="button" name="VotePoll" id="VotePoll" value="Vote" />';
			break;	
		}
	}
}

?>

</div>
<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
google.load("visualization", "1", {packages:["columnchart"]}); 
</script>
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
	var checkCondi=0;
	var chooseKey="";
	var startKey=$("input[name=choice]").size()+1;
	$("#VotePoll").click(function(){
		$("input[name=choice]").each(function(key){
			var condi=$("input[name=choice]").eq(key).attr("checked");
			if(condi==true){
				checkCondi=1;
				chooseKey=key+1;
			}
		});
		if(checkCondi==1){
			var loading_obj='<p id="i_loading" align="center"><img src="http://www.ninenik.com/ajax.gif" /></p>'; 
			 $("div#pollDiv").html(loading_obj); 
			var resultData=$.ajax({
				url:"ajax_poll_jquery_google.php",
				data:"voteID="+chooseKey+"&startKey="+startKey,
				async:false,
				success:function(resultData){
					var myObject = eval('(' + resultData + ')');
					$("div#pollDiv").html("");
					var data = new google.visualization.DataTable(); 
					data.addColumn('string', 'Choice Poll'); 
					data.addColumn('number', 'Score Point'); 
					data.addRows(myObject.numRowsChart);

					for(i=0;i<myObject.numRowsChart;i++){
						data.setCell(i, 0, myObject.ChoiceTitle[i].choiceData);
						data.setCell(i, 1, myObject.ChoiceTitle[i].score);
					}					
					var chart = new google.visualization.PieChart(document.getElementById('pollDiv')); 
					chart.draw(data, {
						width: 250, 
						height: 300, 
						is3D: true,
						legend:'bottom',
						legendFontSize:13, 
						titleFontSize:12,
						title:myObject.chartTitle
					}); 
				}
			}).responseText;
		}
	});
});
</script>

</body>
</html>

ไฟล์ text สำหรับสร้างแบบสำรวจ

poll1.txt



กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ





Tags:: poll jquery ajax







URL สำหรับอ้างอิง











เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ