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

เขียนเมื่อ 13 ปีก่อน โดย Ninenik Narkdee
ajax ฐานข้อมูล jquery tooltip

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ ajax ฐานข้อมูล jquery tooltip

ดูแล้ว 39,160 ครั้ง


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

https://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>

 



กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ











URL สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ