ขอสอบถามหน่อยครับ เรื่อง Ajax และ Fancybox


ผมเขียนเว็บให้คิวรี่ข้อมูลจากการ Search โดยใช้ Ajax แสดงผลหลังจากการป้อนข้อมูลทางกล่อง input



http://akti.group5.ru/trainee/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);

?>


----------------------------------------------------------------------------------------


29 มี.ค. 2554 2 2,536


คำตอบนี้ผมตอบมาเป็นร้อยครั้งแล้วครับ

ปัญหาก็คือ เราไม่สามารถใช้ Javascript ในหน้าที่ถูก Ajax เรียกได้ครับ หรือจะให้ตอบตรงๆก็คือ ไม่สามารถใส่ Javascript ใน get.php ได้

การแก้ไขก็คงต้องเลี่ยงไปใช้วิธีอื่นครับ เช่นการเรียกใช้ fancybox จากการ คลิกรูป ถึงจะใช้งาน Javascript ได้ครับ และ อาจมีวิธีเลี่ยงอีกหลายๆวิธีครับ ลองศึกษาดูนะครับ



 


#1

ขอบคุณครับ

#2
ความคิดเห็น
ไฟล์อัปโหลด ชนิด jpg, jpeg ขนาดไฟล์ไม่เกิน 1024
^