カラーボックスでhtmlページを更新できません。

私が持っているものはとてもシンプルです。私は私のメインのPHPページ上のボタンをクリックし、それは2つの機能を実行します。 1つは、HTMLページのみを使用してPHPページを使用してカラーボックスを作成し、次に2番目の関数はjavascriptを使用してページの要素を変更します。しかし、何らかの理由で2番目の機能が時間の50％で機能しません！これをXAMPP（ローカルサーバー）でテストすると完全に動作しますが、リモートでテストする場合、2番目の機能が実行されないことがあります。カラーボックスでhtmlページを更新できません。

ここに私のコードがあります（必要な場合）。これは私のメインページのHTML/PHPコードです。実際にはちょうどカラーボックスを開く

<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はカラーボックスにロードされているものであるonclickの二つの機能を（再び、第二は時々動作しません）を実行しますそれはちょうど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の機能をしているカラーボックスにロードされるように、それは、カラーボックスの2つの部分を編集します。 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を使用してその要素を編集できると仮定しますが、そのようには見えません。助けてください！ :)ここで

出典

2012-03-19 fvertk

はおそらく何が起こるかです：

ローカルサーバー上でテストしているときにはJavaScriptがinfoBoxPopulateを起動する準備ができて、一度ので、サーバの応答の時間は、あなたのカラーボックスの実行時間よりも低くなっていますサーバーの応答は既にダウンロードされており、すぐに使用できます。 JSはシングルスレッドなので、一度に1つの関数しか実行されません。
リモートサーバーからのテストでは、サーバーとテストマシンとの間の交換時間が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> 
```
チェック：

ソリューションは、あなたのカラーボックスが提供するフックを使用し、カラーボックスは、それは準備ができていることを言った後に機能を起動することです最高の。

出典

2012-03-19 00:48:12 wdev

ありがとうございました！あなたは真のマスターであり、私の問題を解決しました。 – fvertk

カラーボックスでhtmlページを更新できません。

答えて

関連する問題