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

06 May 2010 เขียนเมื่อ 14 ปีก่อน โดย Ninenik Narkdee

ajax jquery poll

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

ดูแล้ว 19,760 ครั้ง

คำเตือน! เนื้อหาต่อไปนี้ เป็นเนื้อหาเก่า อาจจะไม่เหมาะสำหรับนำไปใช้งาน หรือไม่สามารถใช้งานได้แล้ว

ตัวอย่าง

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

Code ตัวอย่าง

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

<?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 สำหรับสร้างแบบสำรวจ

poll1.txt

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