|
|
|
อยากจะเพิ่มลูกเล่นให้กับ ajax อัพเดทข้อมูลช่วยเข้ามาตอบหน่อยครับ |
|
|
|
|
|
|
|
ยังไม่ได้เลยครับช่วยหน่อยนะครับ - -.
Code (PHP)
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.js"></script>
<script>
$("#id").animate({
'background-color' : 'red' สีที่ต้องการให้เปลี่ยน
},1000, function(){
'background-color' : 'white' //สีเดิม
});
</script>
</head>
<body>
<table style="border:1px solid gray">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr id="row0">
<td class="id"></td>
<td class="name"></td>
<td class="phone"></td>
</tr>
<tr id="row1">
<td class="id"></td>
<td class="name"></td>
<td class="phone"></td>
</tr>
</tbody>
</table>
<script>
refresh();
function refresh (){
$.post('result.php', function(data) {
$.each(data, function(row, obj) {
$.each(obj, function(key, value) {
if($("#row"+row+" ."+key).html()!=value)
$("#row"+row+" ."+key).html(value);
// console.log(value);
});
});
setTimeout(refresh,1000);
}, "json");
}
</script>
</body>
</html>
|
|
|
|
|
Date :
2014-03-30 22:48:21 |
By :
aibot |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
กรำ ไม่เอาไปใส่ ใน each ละครับ
|
|
|
|
|
Date :
2014-03-30 22:52:12 |
By :
yamcrocodile |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ใส่ยังไงหรอครับทำให้ดูหน่อยสิครับ ไม่รู้จริงๆ
|
|
|
|
|
Date :
2014-03-30 23:05:10 |
By :
aibot |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
pยังไม่ได้เลยครับตอบหน่อยเถอะครับผมอยากทำได้จริงๆ
Code (PHP)
<script>
refresh();
function refresh (){
$.post('result.php', function(data) {
$.each(data, function(row, obj) {
$.each(obj, function(key, value) {
$("#id").animate({
'background-color' : 'red'
},1000, function(){
'background-color' : 'white'
});
if($("#row"+row+" ."+key).html()!=value)
$("#row"+row+" ."+key).html(value);
// console.log(value);
});
});
setTimeout(refresh,1000);
}, "json");
}
</script>
|
|
|
|
|
Date :
2014-03-30 23:21:00 |
By :
aibot |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
กำผมไม่รู้วิธีเอาไปลงโค๊ดผมหน่ะสิครับผมไม่เคยทำ ajax
|
|
|
|
|
Date :
2014-03-30 23:57:49 |
By :
aibot |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
งั้นผมขอ code หน้า result.php ด้วยครับ
|
|
|
|
|
Date :
2014-03-30 23:59:08 |
By :
yamcrocodile |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<?php
$result = array(
array(
"id" => "sdd88"
,"name" => chr(rand(10,100))
,"phone" => rand(10,100)
),
array(
"id" => "C02"
,"name" => chr(rand(10,100))
,"phone" => rand(10,100)
)
);
echo json_encode($result);
?>
|
|
|
|
|
Date :
2014-03-31 00:00:46 |
By :
aibot |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
กำ ไปเเล้วหรอครับ ?
|
|
|
|
|
Date :
2014-03-31 00:23:42 |
By :
aibot |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ผมกำลังไป test code มาให้รอซักครู่ นะครับ
|
|
|
|
|
Date :
2014-03-31 00:33:00 |
By :
yamcrocodile |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
index.php
Code
<html>
<head>
<title>test</title>
<meta charset="utf-8">
</head>
<body>
<table id="add" border="1" cellpadding="5">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script src="jquery.js"></script>
<script src="js/jquery-ui-1.10.4.custom.js"></script>
<script>
$(function(){
$.ajax({
url: "data.php",
type: "post",
dataType: "json",
success: function(data){
$.each(data, function(k,v){
setTimeout(function(){
var addTr = "<tr id=add"+k+">";
addTr += "<td>"+v.id+"</td>"
addTr += "<td>"+v.name+"</td>";
addTr += "<td>"+v.phone+"</td>";
addTr += "</tr>";
$("table#add tbody").append(addTr)
$("#add"+k).animate({
backgroundColor : "red"
},200, function(){
$(this).animate({
backgroundColor : "white"
});
});
},k*1000)
})
}
})
})
</script>
</body>
</html>
data.php
Code
<?php
$result = array(
array("id" => "sdd88",
"name" => chr(rand(10,100)),
"phone" => rand(10,100)),
array("id" => "C02",
"name" => chr(rand(10,100)),
"phone" => rand(10,100))
);
echo json_encode($result);
?>
อย่าลืม download ที่ผม ทำสีแดงไว้ด้วยนะครับ jquery ui สามารถ download ได้ที่
http://jqueryui.com/download/
|
|
|
|
|
Date :
2014-03-31 00:35:08 |
By :
yamcrocodile |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ขอบคุณครับ
ผมว่ายังแปลๆอยู่ครับอันเดิมมันอัพเดทเรื่อย ๆ แต่ไม่เป็นไรครับขอบคุณครับ
|
|
|
|
|
Date :
2014-03-31 00:42:42 |
By :
aibot |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Load balance : Server 05
|