ขอสอบถามหน่อยครับ เรื่อง Ajax และ Fancybox
ผมเขียนเว็บให้คิวรี่ข้อมูลจากการ Search โดยใช้ Ajax แสดงผลหลังจากการป้อนข้อมูลทางกล่อง input
http://akti.group5.ru/...ainee/demo/index.php ดังนี้ครับ
แล้วผมต้องการแสดงรูป โดยใช้ Fancybox ครับ [http://fancybox.net/]
คือตอนนี้ไม่สามารถแสดงผลในรูปแบบนั้นได้ แต่ถ้าผมเรียกหน้า get.php ซึ่งเป็นหน้าที่เรียกค่ากลับมาแสดง
http://akti.group5.ru/trainee/demo/get.php
สามารถให้แสดงผลรูปจากรูปเล็กเป็นรูปใหญ๋โดยใช้ Fancybox ได้ ขอคำแนะนำด้วยครับ พึ่งเริ่มศึกษา Ajax ครับ :)
และผมได้ทำการแนบโค้ดทั้งสองไฟล์มาด้วย
------------------ index.php -----------------------------
<html>
<head>
<title></title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/thickbox.js"></script>
</head>
<script language="JavaScript">
var HttPRequest = false;
function doCallAjax() {
var name = document.getElementById('txtname').value;
var sys = document.getElementById('txtSys').value;
var ser = document.getElementById('txtSer').value;
HttPRequest = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,...
HttPRequest = new XMLHttpRequest();
if (HttPRequest.overrideMimeType) {
HttPRequest.overrideMimeType('text/html');
}
} else if (window.ActiveXObject) { // IE
try {
HttPRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
HttPRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!HttPRequest) {
alert('Cannot create XMLHTTP instance');
return false;
}
var url = 'get.php';
var pmeters = 'name='+name+'&sys='+sys+'&ser='+ser;
HttPRequest.open('POST',url,true);
HttPRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
HttPRequest.setRequestHeader("Content-length", pmeters.length);
HttPRequest.setRequestHeader("Connection", "close");
HttPRequest.send(pmeters);
HttPRequest.onreadystatechange = function()
{
if(HttPRequest.readyState == 3) // Loading Request
{
document.getElementById("mySpan").innerHTML = "Now is Loading...";
}
if(HttPRequest.readyState == 4) // Return Request
{
document.getElementById("mySpan").innerHTML = HttPRequest.responseText;
}
}
}
</script>
<body>
<h1>Site</h1>
<form name="frmMain">
Search Team <input type="text" name="txtname" id="txtname" onkeyup="JavaScript:doCallAjax();"> System <input type="text" name="txtSys" id="txtSys" onkeyup="JavaScript:doCallAjax();"> Server<input type="text" name="txtSer" id="txtSer" onkeyup="JavaScript:doCallAjax();">
<input type="button" name="btnSearch" id="btnSearch" value="Search" OnClick="JavaScript:doCallAjax();">
<br><br>
<span id="mySpan"></span>
</form>
</body>
</html>
----------------------------------------------------------------------------------------------------------------------------------
--------------------------------------------------get.php---------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="imagetoolbar" content="no" />
<title>FancyBox 1.3.4 | Demonstration</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
</script>
<script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />
<link rel="stylesheet" href="style.css" />
<script type="text/javascript">
$(document).ready(function() {
$("a#show").fancybox();
});
</script>
</head>
<?php
$name = $_POST["name"];
$sys = $_POST["sys"];
$ser = $_POST["ser"];
$objConnect = mysql_connect("localhost","akti","1234") or die("Error Connect to Database");
$objDB = mysql_select_db("cms");
$strSQL = "SELECT
teams.NAME_TEAM as 'NAMETEAM',systems.NAME_SYSTEM as 'NAMESYSTEM',servers.SERVER_NAME as 'SERVERNAME',rakes.RAKE_NAME as 'RAKENAME'
,rakes.RAKE_LOCATION as 'RAKE_LOCATION',rakes.rooms as 'room',rakes.pic as 'pic'
FROM (((servers INNER JOIN rakes ON servers.ID_RACK = rakes.ID_RACK)
INNER JOIN systems ON servers.ID_SYSTEM = systems.ID_SYSTEM)
INNER JOIN teams ON teams.ID_TEAM = systems.ID_TEAM)
WHERE teams.NAME_TEAM LIKE '%".$name."%' and systems.NAME_SYSTEM LIKE '%".$sys."%' and servers.SERVER_NAME LIKE '%".$ser."%' ";
$objQuery = mysql_query($strSQL) or die ("Error Query [".$strSQL."]");
?>
<table width="600" border="1">
<tr>
<th width="91"> <div align="center">NAMETEAM</div></th>
<th width="98"> <div align="center">NAMESYSTEM</div></th>
<th width="198"> <div align="center">SERVERNAME</div></th>
<th width="97"> <div align="center">RAKENAME</div></th>
<th width="59"> <div align="center">RAKE_LOCATION</div></th>
<th width="71"> <div align="center">room</div></th>
<th width="100"> <div align="center">room</div></th>
</tr>
<?
while($objResult = mysql_fetch_array($objQuery))
{
?>
<tr>
<td><div align="center"><?=$objResult["NAMETEAM"];?></div></td>
<td><?=$objResult["NAMESYSTEM"];?></td>
<td><?=$objResult["SERVERNAME"];?></td>
<td><div align="center"><?=$objResult["RAKENAME"];?></div></td>
<td align="right"><?=$objResult["RAKE_LOCATION"];?></td>
<td align="right"><?=$objResult["room"];?></td>
<td align="center"><a id="show" href=<?=$objResult["pic"];?>><img src=<?=$objResult["pic"];?> width=100 height=100></a></td>
</tr>
<?
}
?>
</table>
<?
mysql_close($objConnect);
?>
----------------------------------------------------------------------------------------
คำตอบนี้ผมตอบมาเป็นร้อยครั้งแล้วครับ
ปัญหาก็คือ เราไม่สามารถใช้ Javascript ในหน้าที่ถูก Ajax เรียกได้ครับ หรือจะให้ตอบตรงๆก็คือ ไม่สามารถใส่ Javascript ใน get.php ได้
การแก้ไขก็คงต้องเลี่ยงไปใช้วิธีอื่นครับ เช่นการเรียกใช้ fancybox จากการ คลิกรูป ถึงจะใช้งาน Javascript ได้ครับ และ อาจมีวิธีเลี่ยงอีกหลายๆวิธีครับ ลองศึกษาดูนะครับ