無法在colorbox中更新html頁面。

Question

所以我所擁有的非常簡單。 我在我的主要php頁面上單擊一個按鈕，它運行兩個功能。 一個使用php頁面（僅包含html）創建一個顏色框，然后第二個函數使用javascript更改頁面的元素。 但是，由於某種原因，第二個功能在50％的時間內無法正常工作！ 在XAMPP（本地服務器）上進行測試時，它可以完美運行，但是在進行遠程測試時，第二功能有時無法運行。

現在，這是我的代碼，如果需要的話，可以更深入。 這是我的主頁HTML / PHP代碼。 onclick運行兩個函數（同樣，第二個有時不起作用）：

<img src="<?php echo visualizeStatus($t11Status, 11) ?>" alt="" width="130" height="105" id="table11img" onclick="showColorBox(); infoBoxPopulate(11)"/>

showColorBox（）實際上只是打開一個顏色框：

function showColorBox()
{
    $.colorbox({href:"infoBox.php", left: 400, top: 100, opacity: 0.40});
}

infoBox.php是加載到colorbox中的內容，它只是一個html頁面，沒有特別的原因為什么我要使用.php。 這就是它的樣子（僅在此復制/粘貼上樣式不好，在不丟失“代碼樣本”的情況下無法對其進行格式化。您需要知道的是我給了元素id，以便我可以在下一個對其進行編輯功能：

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Table Info</title>

</head>

<body>
<font color="#450505" size =+5"><div id="tableinfo_number">Table # Error</div></font>
<br>
   <font size ="+2"><div id="tableinfo_status">Table Status Error</div>
    <div id="tableinfo_party">Party: N/A</div>
   <div id="tableinfo_orders">Orders: N/A</div></font>
<br>
<br>

<hr>
    <center><p><img id= "tableinfo_seatP" src="images/info_seat.png" width="92" height="42" onclick="showSeatBox(window.tableNumWin)"/><img id= "tableinfo_oneUp" src="images/info_increaseOne.png" width="45" height="50" onclick="increasetStatus(window.tableNumWin)" /><img id= "tableinfo_notif" src="images/info_notification.png" width="56" height="53" onclick="makeRequest(window.tableNumWin)"/></p></center>
</body>
</html>

好了，所以該頁面被加載到了colorbox中。 現在，第二個函數infoBoxPopulate（11）所做的只是它的javascript / ajax函數。 它編輯了colorbox php頁面的兩個部分。 一個甚至不需要php代碼來執行此操作，但是當它們確實失敗時，它們都會同時失敗。

function infoBoxPopulate(tIDin)
{
    // This needs to wait until colorbox is loaded, then do this code.
    var tID = tIDin;
    var tStatus;

    window.tableNumWin = tID;
    //var oneUpJS = document.getElementById("tableinfo_oneUp");
    //oneUpJS.onclick = function() {increasetStatus(tID);} 

    if (window.XMLHttpRequest)
    {     // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp4=new XMLHttpRequest();
    }
    else
    {     // code for IE6, IE5
            xmlhttp4=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp4.onreadystatechange=function()
    {
        document.getElementById("tableinfo_number").innerHTML= "Table: " + tID;
        document.getElementById("tableinfo_status").innerHTML= xmlhttp4.responseText;
        populateParty(tID);
    }   
    xmlhttp4.open("GET","populateStatus.php?tID="+tID,true);
    xmlhttp4.send();
}

同樣，populateStatus只是執行查詢，然后返回responseText。 所以，我想我只是誤解了這段代碼是如何運行的。 為什么在遠程完成時它不會更頻繁地工作……可能是因為需要更多時間才能到達SQL Server？ 我認為一旦加載了php頁面，我就可以使用javascript編輯它的任何元素，但事實並非如此。 請幫忙！ :)

Answer 1

可能會發生以下情況：

在本地服務器上進行測試時，服務器響應時間比色盒執行時間短，因此一旦javascript准備啟動infoBoxPopulate，服務器響應就已經下載並可以使用。 JS是單線程的，因此一次僅執行一個功能。
從遠程服務器進行測試時，服務器與測試機之間的交換時間大於JS執行時間（colorbox AJAX調用是異步的，因此它不會阻止代碼執行），因此有時您的JS代碼會在沒有訪問響應的情況下執行。 這就是所謂的賽車狀態。

解決方案是使用顏色框提供的鈎子，並在顏色框告訴您准備就緒后啟動該函數：

<img src="<?php echo visualizeStatus($t11Status, 11) ?>" alt="" width="130" height="105" id="table11img" onclick="showBoxAndPopulate();"/>
<script type="text/javascript">
  function showBoxAndPopulate()
  {
      $.colorbox({
        href:"infoBox.php",
        left: 400,
        top: 100,
        opacity: 0.40,
        onComplete: function() { infoBoxPopulate(11); }
      });
  }
</script>

在colorbox網站上查看回調，以找到最適合您的回調。

無法在colorbox中更新html頁面。

問題描述

1 個解決方案

解決方案1
1 已采納 2012-03-19 00:48:12

無法在colorbox中更新html頁面。

問題描述

1 個解決方案

解決方案1 1 已采納 2012-03-19 00:48:12

解決方案1
1 已采納 2012-03-19 00:48:12