在颜色框中更新 html 页面不起作用。答案

【问题标题】：Updating html page in colorbox doesn't work.在颜色框中更新 html 页面不起作用。
【发布时间】：2012-03-19 00:04:48
【问题描述】：

所以我所拥有的非常简单。我在我的主 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 是加载到颜色框中的内容，它只是一个 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>

好的，因此该页面已加载到颜色框中。现在，第二个函数 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 服务器需要更多时间？我假设一旦加载了 php 页面，我就可以使用 javascript 编辑它的任何元素，但情况似乎并非如此。请帮忙！ :)

【问题讨论】：

标签： php javascript sql-server colorbox

【解决方案1】：

以下是可能发生的情况：

当您在本地服务器上进行测试时，服务器响应的时间低于颜色框执行的时间，因此一旦 javascript 准备好启动 infoBoxPopulate，服务器响应就已经下载并可以使用了。 JS 是单线程的，因此一次只执行一个函数。
当你从远程服务器进行测试时，你的服务器和你的测试机之间的交换时间大于 JS 执行时间（彩盒 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>

检查 callbacks 在 colorbox 网站上找到最适合您的。

【讨论】：