ใช้งาน ajax ใน jQuery ดึงข้อมูลจากฐานข้อมูลมาแสดง ใน tooltip

อาศัยการประยุกต์ จากหัวข้อ

http://www.ninenik.com/ประยุกต์_tooltip_มากกว่า_1_ตัวใน_ฟอร์ม_ด้วย_jQuery-277.html

โดยส่วนที่เพิ่มเข้ามา คือการใช้งาน ajax ด้วย jQuery เพิ่มดึงข้อมูลมาแสดง

ตัวอย่างต่อไปนี้คือแนวทาง ภายใต้เงื่อนไขความต้องการ คือ

ต้องการแสดง ข้อมูลสมาชิก เมื่อ เอาเมาส์วางไว้เหนือรูปภาพของสมาชิกนั้นๆ
โดยกำหนด รูปภาพดังนี้

<img src="img/avatar/user.gif" width="50" height="50" title="10" class="userInfo" />

คือ กำหนด ให้มี attribute ชื่อ title เพื่อเก็บ id ของสมาชิก และ class เพื่อใช้สำหรับการแสดง
tooltip

จากนั้นสร้างไฟล์สำหรับแสดงข้อมูลของสมาชิก ที่ดึงข้อมูลจากฐานข้อมูล โดยกำหนดรูปแบบ
การแสดงผล ตามต้องการ ในที่นี้ใช้ชื่อ getUserInfo.php โดยจะทำการรับค่า id ของสมาชิกมา
แล้วไปตรวจสอบในฐานข้อมูล แล้วนำชื่อของสมาชิกนั้นๆ มาแสดง
ซึ่งจะทำงานในรูปแบบ ajax ด้วย jQuery ดังนี้

ตัวอย่าง ไฟล์ getUserInfo.php

<?php
session_start();
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);    
// ส่วนของการติดต่อฐานข้อมูล
$link=mysql_connect("localhost","root","test");  
mysql_select_db("test");  

if($_GET['member_id']!=""){
	$q="SELECT member_name  FROM member WHERE member_id='".$_GET['member_id']."' ";
	$qr=mysql_query($q);
	if(@mysql_num_rows($qr)>0){
		$rs=mysql_fetch_array($qr);
		// กำหนดรูปแบบการแสดงผลตามต้องการ ในที่นี้แสดงแค่ชื่อ
		echo $rs['member_name'];
	}
}
?>  

HTML Code ตัวอย่าง

<img src="img/avatar/user.gif" width="50" height="50" title="10" class="userInfo" />

<!-- ส่วนสำหรับนำข้อมูลมาแสดง -->
<span class='iTooltip' id="showUserInfo"></span>

CSS สำหรับกำหนดรูปแบบการแสดงผล

<style type="text/css"> 
/* css สำหรับกำหนดรูปแบบของกล่องข้อความ Tooltip */
.iTooltip{
	position:absolute;
	border:1px solid #FFCC66;
	background-color:#FFFFCC;
	color:#000000;
	display:none;
	padding:5px;
/*	width:200px;*/
	font-size:12px;
}
</style>

Javascript Code

<script language="javascript" src="js/jquery-1.4.1.min.js"></script>
<script type="text/javascript">
$(function(){
	$("img.userInfo").hover(function(event){ // img.userInfo คือ แท็ก img ที่มี class เท่ากับ userInfo
		var userID=$(this).attr("title"); // id ของสมาชิกที่ตรงในฐานข้อมูล
		var dataUser=$.ajax({
			url:"getUserInfo.php",
			data:"member_id="+userID,
			success:function(dataUser){
				callTooltip("#showUserInfo",event,dataUser); 
			}
		}).responseText;		
	},function(){
		$("#showUserInfo").hide();
	});

});
function callTooltip(obj,event,strText){ // ฟังก์ชั่นแสดงกล่องข้อความ Tooltip
		var locateX=event.pageX;   
        var locateY=event.pageY; 
		locateX+=10;
		locateY+=10;
		$(obj).show().css({
			left:locateX,
			top:locateY
		}).html(strText);				
}
</script>