A-AA+then

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

2,347

    ผมเขียนเว็บให้คิวรี่ข้อมูลจากการ 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);
    ?>

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

2 ความคิดเห็น

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

1

ขอบคุณครับ
2
^