สร้าง poll แบบสำรวจ ด้วย ajax ใน jQuery อย่างง่าย
06 May 2010ตัวอย่าง
สร้าง 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 สำหรับสร้างแบบสำรวจ
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
05 Nov 08 CSS สร้างเมนูแนวตั้ง 2 ชั้นโดยไม่ใช้ javascript และตาราง table อ่าน 9285 25 Sep 08 Functions ลบไฟล์ อ่าน 2396 04 Oct 10 รู้จัก และใช้งาน php sdk สำหรับ facebook เพิ่มขึ้น อ่าน 2854 25 Sep 08 Code เกี่ยวกับ การหาวันข้างหน้า อ่าน 1871 05 Jul 09 สร้างฟังก์ชัน autocomplete ให้ใช้งานแบบง่าย ด้วย ajax อ่าน 13030 17 Mar 09 สร้างฟังก์ชันลบเวลาด้วย php อย่างง่าย อ่าน 2078 09 Aug 10 ประยุกต์ jQuery UI ปฏิทิน Datepicker แสดงภาษาไทย และใช้ ปี พ.ศ. อ่าน 8697 26 Feb 09 สร้างคลิกขวาเมนูในเว็บด้วย CSS + jQuery อย่างง่ายดาย อ่าน 3181 11 Jan 12 รู้จัก และใช้งาน DATEDIFF() ใน mysql ฟังก์ชัน เทียบช่วงเวลาที่เหลือ อ่าน 413 26 Sep 10 การแสดงข้อมูล แนะนำ เส้นทาง ใน google map อ่าน 2690 06 Nov 09 สร้าง swap แบนเนอร์ effect แบบ fade ด้วย jQuery อย่างง่าย อ่าน 4671 25 Sep 08 สร้างฟังก์ชันในการหาจำนวนวัน ชั่วโมง นาที และวินาทีที่ผ่านมาแล้ว อ่าน 1989 06 Jun 11 แนวทางการกำหนด expired header ให้กับรูปภาพ ด้วย php อย่างง่าย อ่าน 771 26 Oct 10 แนะนำ autocomplete ใน jQuery ui กับการประยุกต์ใช้งาน อ่าน 1992 25 Sep 08 ตรวจสอบโดเมน Domain ด้วย Ajax อ่าน 3193 19 Oct 10 เริ่มต้นการใช้งาน jwplayer jquery plugin แสดง video บนเว็บไซต์ อ่าน 2754 17 Nov 08 ตรวจสอบฟอร์ม form ก่อน submit ด้วย jquery อ่าน 9330 04 Oct 11 การแสดงข้อมูลใน iframe ตามตำแหน่งที่ต้องการด้วย css อย่างง่าย อ่าน 958 04 May 10 ประยุกต์ ใช้งาน php และ ajax ใน jQuery แสดงผลลัพธ์ คล้าย twitter อ่าน 3192 27 Dec 10 การสร้าง ajax dictionary จาก longdo ด้วย jQuery อ่าน 2698