[英]Updating html page in colorbox doesn't work.
所以我所拥有的非常简单。 我在我的主要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编辑它的任何元素,但事实并非如此。 请帮忙! :)
可能会发生以下情况:
解决方案是使用颜色框提供的钩子,并在颜色框告诉您准备就绪后启动该函数:
<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网站上查看回调 ,以找到最适合您的回调 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.