Updating html page in colorbox doesn't work.

Question

So what I have is pretty simple. I click a button on my main php page and it runs two functions. One creates a colorbox using a php page (with only html) and then the second function alters elements of the page using javascript. However, for some reason the second function doesn't work 50% of the time! When testing this on XAMPP (local servers), it works perfectly, but when testing remotely, the second function sometimes doesn't run.

Now here is my code to go more in depth (if needed). This is the my main page HTML/PHP code. onclick runs two functions (again, the second sometimes doesn't work):

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

showColorBox() really only just opens a colorbox:

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

infoBox.php is what is loaded into the colorbox and it's just an html page, no particular reason why I used .php. This is what it looks like (bad styling only on this copy/paste, couldn't get it to format without losing the "code sample" thing. All you need to know is I give elements id's so I can edit them in the next function:

!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>

Alright, so that page is loaded into the colorbox. Now, what the second function, infoBoxPopulate(11), does is it just does a javascript/ajax function. It edits two parts of the colorbox php page. One doesn't even require the php code to do this, yet they both fail at the same time when they do fail.

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();
}

Again, populateStatus just does a query that then returns the responseText. So, I think I just am misunderstanding how this code is run. Why would it not work more often when done remotely... possibly because it takes more time to reach the SQL server? I would assume that once the php page is loaded that I can edit any elements of it using javascript, but that doesn't appear to be the case. Please help! :)

Answer 1

Here's what probably happens:

When you're testing on local server, the time of the server response is lower than the time of your colorbox execution, so once javascript is ready to launch infoBoxPopulate the server response is already downloaded and ready to use. JS is single threaded, so only one function at a time is executed.
When your testing from remote server, the time of exchange between your server and your testing machine is bigger than the JS execution time (the colorbox AJAX call is asynchronous, so it doesn't block the code execution), so sometimes your JS code gets executed without having access to the response. This is so-called racing condition.

The solution is to use an hook provided by your colorbox and launch the function after the colorbox told you it's ready:

<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>

Check callbacks on colorbox site to find the one that suits you the best.

Updating html page in colorbox doesn't work.

Question

1 answers

solution1
1 ACCPTED 2012-03-19 00:48:12

Updating html page in colorbox doesn't work.

Question

1 answers

solution1 1 ACCPTED 2012-03-19 00:48:12

solution1
1 ACCPTED 2012-03-19 00:48:12