ขอสอบถามหน่อยครับ เรื่อง 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,408


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

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

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

    

     


#1

ขอบคุณครับ

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