|
|
|
สอบถามเรื่องแนวทางการเขียน Code Ajax JQuery ครับผม หาพยายามคำแนวทาง |
|
|
|
|
|
|
|
คือว่า ตอนนี้ผมลองหัดเขียนอยู่หนะครับ
แต่ปรากดว่าประสบปัญหาเรื่อง พอดึงรายละเอียดหน้ามาในหน้า main แล้ว พอเขียน Code
Code (PHP)
<!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>Untitled Document</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script language="javascript" src="module/scripts/jquery-1.8.1.min.js" ></script>
<script language="javascript">
$(document).ready(function() {
$("#center_content").fadeIn(1500);
Detail();
function Detail(){
$.ajax({url:"store_member_detail.php",
async:false,
cache:false,
global:false,
type:"POST",
data:"Search="+$("#Search").val()+
"&Page=1",
dataType:"html",
success: function(result){
$("#SpanDetail").html(result);
}
});
}
$("#Search").keyup(function(){
Detail();
});
function Page(){
$.ajax({url:"store_member_detail.php",
async:false,
cache:false,
global:false,
type:"POST",
data:"Search="+$("#Search").val()+
"&Page="+$("#Page").val(),
dataType:"html",
success: function(result){
$("#SpanDetail").html(result);
}
});
}
function Delete(MemberID,Username,Avatar){
if(confirm('ยืนยันการลบ : '+Username) == true){
$.ajax({url:"store_member_delete.php",
async:false,
cache:false,
global:false,
type:"POST",
data:"MemberID="+MemberID+
"&Username="+Username+
"&Avatar="+Avatar,
dataType:"html",
success: function(result){
$("#Tb_Message").fadeIn(1500);
$("#SpanMessage").html(result);
$("#Tb_Message").fadeOut(1500);
Page();
}
});
}else{
return false;
}
}
});
</script>
</head>
<body>
<div id="wrap">
<div id="header"></div>
<div id="clear"></div>
<div id="center_content">
<div class="left_content">
<div class="bar">
<table width="750" border="0">
<tr>
<td width="550"><div class="font-title"><div class="color-white"><img src="images/icon/member.png" class="icon" />จัดการสมาชิก</div></div></td>
<td width="190"><input type="search" id="Search" class="input" value="" /></td>
</tr>
</table>
</div>
<table id="Tb_Message" width="767" border="0" class="display_none">
<tr>
<td><div class="center"><span id="SpanMessage"></span></div></td>
</tr>
</table>
<table id="Tb_Detail" width="767" border="0">
<tr>
<td><span id="SpanDetail"></span></td>
</tr>
</table>
</div>
<div class="right_content">
<div class="bar"></div>
</div>
</div>
<div id="clear"></div>
<div id="footer"></div>
</div>
</body>
</html>
ปรากดว่า function page() สามารถแสดง Action ได้ครั้งเดียวครับ
แต่ถ้านำออกมาไม่ให้อยู่ใน Tag document.ready ก็สามารถใช้งานได้ปกติ
อย่างนี้ผมควรทำอย่างไรดีครับ
ถ้าผมไม่ใช้ document เลย แต่ใช้ควบคุมด้วย function แทนจะผิดแนวทางการเขียนไหมครับ
หรือว่าผมต้องใช้ JSON ยังไงรึเปล่า ขอบคุณครับ
Tag : PHP, HTML/CSS, JavaScript, Action Script, Ajax, jQuery
|
ประวัติการแก้ไข 2012-11-15 09:59:22
|
|
|
|
|
Date :
2012-11-15 09:50:19 |
By :
Ex-[S]i[L]e[N]t |
View :
884 |
Reply :
2 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
จริงๆแล้วไม่จำเป็นต้องใช้ $(document).ready(); เลยก็ได้ครับ
สิ่งที่เราใส่เราใส่เข้าไปใน $(document).ready(); คือสคริปที่คิดว่าอาจะมีปัญหา อย่างเช่น พวก event ที่ต้องเรียกใช้ตัว element ต่างๆ
เพราะว่า javascript จะรันทันทีเมื่อโหลดเสร็จ หาก DOM ยังไม่พร้อม ก็จะหา element ที่ต้องการไม่พบ จนเำิิำกิดข้อผิดพลาดได้
ปล. เีขียนโค้ดได้สะอาดดีครับ
เหลือแค่นิดเดียวคือ พยายามเอาพวก inline style ออก ก็สมบูรณ์แล้วครับ
ตัวอย่าง inline style
Code (JavaScript)
<table id="Tb_Message" width="767" border="0" class="display_none">
</table>
embedded style
Code (JavaScript)
<table id="Tb_Message"></table>
<style>
#Tb_Message { width:767px; border:0; display:none}
</style>
ถ้าใช้ style เีดียวกันซ้ำกันหลายๆหน้า ก็เลื่อนขึ้นไปใช้ external style sheet แืทน
|
ประวัติการแก้ไข 2012-11-15 12:34:05
|
|
|
|
Date :
2012-11-15 10:39:50 |
By :
dreamlover |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ขอบคุณมากๆเลยครับผม ^^
|
|
|
|
|
Date :
2012-11-15 11:25:56 |
By :
Ex-[S]i[L]e[N]t |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Load balance : Server 04
|