GORAGOD.com

บทที่ 13 การแสดง Tooltip ด้วย AJAX

เป็นคำสัญญา แต่นานมาแล้วครับว่าผมจะเขียนเรื่องนี้ ตอนนั้นผมยังหา Tooltip ดีๆที่ถูกใจผมไม่ได้ แต่ตอนนี้ผมเขียนโค้ด Tooltip เสร็จแล้วก็เลยทำให้เรื่องนี้เป็นจริงขึ้นมาได้ สามารถดูเรื่องราวเกี่ยวกับ Tooltip ได้ครับ

หลักการของการแสดง Tooltip ด้วย AJAX ก็ไม่มีอะไรมากครับ แค่เมื่อเราเรียกใช้งานเพื่อแสดง Tooltip เราก็ให้ AJAX ไปอ่านข้อมูลจากฐานข้อมูลมาแสดง แค่นั้นเองครับ

function loadtooltip(obj, module, category, id) {
  //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=\"\" />&nbsp;<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&amp;category=$category&amp;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=\"\" />&nbsp;<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&amp;category=$category&amp;wb_id=$wb_id\" target=\"_blank\" onclick=\"hidetooltip()\"><b>อ่านต่อ..</b></a></li>";
  echo "</ul>";
?>