แก้ปัญหา ปุ่ม back ปุ่ม forward กับการใช้งาน ajax โหลดหน้าเพจ ด้วย jQuery plugin อย่างง่าย
10 May 2010ในกรณีที่มีการ ใช้งาน ajax เพื่อทำการโหลดเนื้อหาบางส่วนของเว็บไซต์ กับการใช้งานปุ่ม back ปุ่ม forward ในบราวเซอร์ ที่ไม่สอดคล้องกัน เราสามารถใช้ plugin ของ jQuery มาแก้ปัญหานี้ได้
ดูเนื้อหา และรายละเอียดทั้งหมด ด้วยตัวเองได้ที่ลิ้งค์
http://www.asual.com/jquery/address/docs/#sample-usage
ดาวน์โหลดไฟล์ต้นฉบับ พร้อมตัวอย่างได้ที่
ต่อไปนี้เป็นตัวอย่างการนำมาใช่งานอย่างง่าย
สร้างไฟล์ gdata.php สำหรับรับค่า
<?php
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);
if($_GET['gDate']){
echo date("Y-m-d");
exit;
}
if($_GET['gTime']){
echo date("H:i:s");
exit;
}
if($_GET['gText']){
echo "Text";
exit;
}
?>
ไฟล์ทดสอบ HTML และ JavaScript ไฟล์
<!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 back button</title>
</head>
<body>
<a href="#gDate">Get Date</a>
<a href="#gTime">Get Time</a>
<a href="#gText">Get Text</a>
<div id="dataShow">
</div>
<script type="text/javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript" src="js/jquery.address-1.2.min.js?tracker=track"></script>
<script type="text/javascript">
$(function(){
$.address.init(function(event) {
}).change(function(event) {
var goAnchor=event.value;
var url="gdata.php";
switch(goAnchor){
case "/gDate":
$("div#dataShow").load(url+"?gDate=1");
break;
case "/gTime":
$("div#dataShow").load(url+"?gTime=1");
break;
case "/gText":
$("div#dataShow").load(url+"?gText=1");
break;
}
});
$('a').address();
});
</script>
</body>
</html>
ตัวอย่าง
แก้ปัญหา ปุ่ม back ปุ่ม forward กับการใช้งาน ajax โหลดหน้าเพจ ด้วย jQuery plugin
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
25 Sep 08 เอาข้อมูลใน mysql ออกมาเป็น text ไฟล์ อ่าน 2360 04 Oct 08 SQL คืออะไร อ่าน 7367 09 Apr 10 สร้าง countdown นับเวลา ถอยหลัง ด้วย javascript อ่าน 5031 30 Oct 10 การเลื่อน jQuery UI tab อัตโนมัติ ตามเวลาที่กำหนด อ่าน 5083 24 Jun 11 แก้ปัญหา event onchange ของ input type file ไม่ทำงานทันทีใน ใน IE อ่าน 653 08 Oct 08 javascript อย่างง่าย กับการสร้างปุ่มจากรูปภาพ อ่าน 2822 31 Jul 10 เทคนิค ประยุกต์ใช้ ajax ใน jQuery ร่วมกับ iframe กับการอัพโหลดรูป อ่าน 4316 26 Mar 09 กำหนดข้อความเริ่มต้นให้กับ input text ด้วย jquery อย่างง่าย อ่าน 3200 28 May 10 แสดง การแจ้งเตือน ให้เปิด หรือ บันทึกไฟล์ที่ดาวน์โหลด ด้วย php อ่าน 1201 03 Dec 10 ทบทวน การขึ้น บรรทัดใหม่ ใน textarea ด้วย Special Characters in HTML อ่าน 1963 25 Sep 08 ปฏิทินอย่างง่ายด้วย php และ css อ่าน 5051 25 Sep 08 รู้จักฟังก์ชันของ jQuery ในการเรียกใช้ Attribute อ่าน 3479 16 Jul 11 แทรก +1 button ในเว็บจาก google plus อ่าน 861 15 Oct 08 สร้างลิ้งค์มีรูปภาพแสดงนามสกุลไฟล์ อ่าน 2649 25 Sep 08 รู้จักฟังก์ชันของ jQuery ในการเรียกใช้ Class ใน CSS อ่าน 2746 16 Oct 09 สร้างฟังก์ชัน php แปลงตัวเลข เป็นข้อความตัวอักษร ภาษาไทย อ่าน 2126 06 Apr 10 ใช้ คุณสมบัติ css stylesheet สร้างตาราง อ่าน 4586 25 Sep 08 สิ่งที่เรียกว่า Selects, Properties , and Values สิ่งที่เป็นองค์ประกอบของ CSS อ่าน 2818 27 Oct 10 cookie กับการประยุกต์ ใช้งาน เปลี่ยน background พื้นหลัง ด้วย jQuery และ php อ่าน 1472 19 Jun 10 สร้าง comment ด้วย social plugins ใน facebook api อย่างง่ายดาย อ่าน 17118