บทที่ 13 การแสดง Tooltip ด้วย AJAX
เป็นคำสัญญา แต่นานมาแล้วครับว่าผมจะเขียนเรื่องนี้ ตอนนั้นผมยังหา Tooltip ดีๆที่ถูกใจผมไม่ได้ แต่ตอนนี้ผมเขียนโค้ด Tooltip เสร็จแล้วก็เลยทำให้เรื่องนี้เป็นจริงขึ้นมาได้ สามารถดูเรื่องราวเกี่ยวกับ Tooltip ได้ครับ
หลักการของการแสดง Tooltip ด้วย AJAX ก็ไม่มีอะไรมากครับ แค่เมื่อเราเรียกใช้งานเพื่อแสดง Tooltip เราก็ให้ AJAX ไปอ่านข้อมูลจากฐานข้อมูลมาแสดง แค่นั้นเองครับ
//AJAX
var req = Inint_AJAX();
req.onreadystatechange = function () {
if (req.readyState==4) {
if (req.status==200) {
displaytooltip(obj, req.responseText);
}
}
};
//สร้าง connection
req.open("POST", "getdata.php", true);
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
req.send("module="+module+"&category="+category+"&wb_id="+id); //ส่งค่า
};
โค้ด Javascript เพื่อเรียกใช้ tooltip
header("content-type: application/x-javascript; charset=tis-620");
//ค่าที่รับมา
$module=$_POST["module"];
$category=$_POST["category"];
$wb_id=$_POST["wb_id"];
include("bin/config.php"); //ฟังก์ชั่น
include("bin/tdb.class.php"); //เรียกใช้ คลาส text database
include("bin/function.php"); //ฟังก์ชั่น
$db=new tdb($config[data], "db.tdb"); //เปิดฐานข้อมูล
$db->get($module, $config); //โหลด config
//อ่าน record คำถามที่กำหนดมา
$qrecord=$db->getRec("Q$category", $wb_id);
$wb_topic=Conv2View($qrecord[wb_topic], $config);
$wb_detail=$qrecord[wb_detail];
//ถ้าเป็น module howto ให้ไปแยกรายการรายละเอียดออก
if ($module=="howto") {
$details=explode("|", trim($wb_detail));
$wb_description=$details[0];
$wb_detail=$details[1];
}
if ($category=='web' || $category=='ajax' || $category=='xhtml') {
$wb_detail=htmlhighlighter($wb_detail);
}
//จัดรูปแบบการแสดงผลตามที่ต้องการ
echo "<ul><li class=\"header\"><img src=\"images/point2.gif\" alt=\"\" /> <font class=\"navy\"><b>$wb_topic</b></font> $wb_description</li> ";
$detail=cutstring($wb_detail, 300);
if ($detail==$wb_detail) echo "<li>".Conv2View($detail, $config)."</li>";
else echo "<li>".Conv2View($detail, $config)."</li><li class=\"next\"><a href=\"view.php?module=$module&category=$category&wb_id=$wb_id\" target=\"_blank\" onclick=\"hidetooltip()\"><b>อ่านต่อ..</b></a></li>";
echo "</ul>";
?>
ในส่วนนี้เป็นโค้ดหน้าที่ AJAX เรียกไปครับ เป็นการ query ข้อมูลจากฐานข้อมูลออกมาแสดง ตามค่าที่เราส่งเข้าไปครับ อาจแตกต่างกันตามแต่ชนิดของฐานข้อมูล โดยค่าที่ส่งไปจะมี module, category, id อันเป็นค่าจำเป็น ในการเรียกข้อมูลจากฐานข้อมูลครับ
หลังจากได้ข้อมูลมาแล้ว ก็เอาไปแสดงบน tooltip ด้วย displaytooltip(obj, req.responseText); อีกทีครับ
การเรียกใช้งาน
<a href=# onmouseover="loadtooltip(this,'howto','web',144)" onmouseout="hidetooltip()" onclick="hidetooltip()">ตัวอย่างการใช้งาน</a>
หมายเหตุ โค้ดที่เห็นเป็นโค้ดที่ผมใช้จริงบนเว็บนี้ ซึ่งไฟล์ที่ใช้ทั้งหมด(สีน้ำเงิน) เป็นไฟล์ของ Webboard Text ครับ ดังนั้นถ้าต้องการให้ดาวน์โหลดโค้ดเว็บบอร์ดได้บนเว็บเลย
(1,585)
ตัวอย่างการ query จาก MySql ให้สังเกตุส่วน สีน้ำเงิน นะครับ ตอนใช้งานจริง ต้องเปลี่ยนส่วนนั้นๆให้เหมาะสมกับเว็บตัวเองครับ
header("content-type: application/x-javascript; charset=utf-8");
//ค่าที่รับมา
$module=$_POST["module"];
$category=$_POST["category"];
$wb_id=$_POST["wb_id"];
//เชื่อมต่อกับ MySQL
$connect= mysql_connect( $host, $username, $password) or die("ไม่สามารถเชื่อมต่อฐานข้อมูลได้");
$db=mysql_select_db($dbname) or die("ฐานข้อมูลไม่ถูกต้อง");
$sql="SELECT * FROM webboard WHERE module='$module' and category='$category' and id=$wb_id";
$query=mysql_query($sql) or die("ไม่สามารถอ่านฐานข้อมูลได้");
$result=mysql_fetch_array($query);
//จัดรูปแบบการแสดงผลตามที่ต้องการ
echo "<ul><li class=\"header\"><img src=\"images/point2.gif\" alt=\"\" /> <font class=\"navy\"><b>$result[topic]</b></font> $result[description]</li> ";
$detail=cutstring($result[detail], 300);
if ($detail==$wb_detail) echo "<li>$result[detail]</li>";
else echo "<li>$result[detail]</li><li class=\"next\"><a href=\"view.php?module=$module&category=$category&wb_id=$wb_id\" target=\"_blank\" onclick=\"hidetooltip()\"><b>อ่านต่อ..</b></a></li>";
echo "</ul>";
?>