ตัวอย่าง
สร้าง 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="https://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 สำหรับสร้างแบบสำรวจ
