A-AA+then

เป็นคำสัญญา แต่นานมาแล้วครับว่าผมจะเขียนเรื่องนี้ ตอนนั้นผมยังหา 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 ครับ ดังนั้นถ้าต้องการให้ดาวน์โหลดโค้ดเว็บบอร์ดได้บนเว็บเลย

 

rar (1584)


ตัวอย่างการ 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>";
?>

AJAX

Relate

^