How to combine the two scripts refreshing div into one? - php

Question

I have two scripts refreshing div dynamic:
1) http://project-welcome.ugu.pl/test/ajax.js
2) http://project-welcome.ugu.pl/test/ajax2.js
I tried to combine it:
// Customise those settings
var seconds = 1;
var divid = "timediv";
var divid2 = "points";
var url = "boo.php";
var url2 = "boo2.php";
// Refreshing the DIV
function refreshdiv(){
// The XMLHttpRequest object
var xmlHttp;
try{
xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
}
catch (e){
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){
alert("Your browser does not support AJAX.");
return false;
}
}
}
// Timestamp for preventing IE caching the GET request
fetch_unix_timestamp = function()
{
return parseInt(new Date().getTime().toString().substring(0, 10))
}
var timestamp = fetch_unix_timestamp();
var nocacheurl = url+"?t="+timestamp;
var nocacheurl2 = url2+"?t="+timestamp;
// The code...
xmlHttp.onreadystatechange=function(){
if(xmlHttp.readyState==4){
document.getElementById(divid).innerHTML=xmlHttp.responseText;
document.getElementById(divid2).innerHTML=xmlHttp.responseText;
setTimeout('refreshdiv()',seconds*1000);
}
}
xmlHttp.open("GET",nocacheurl,true);
xmlHttp.send(null);
xmlHttp.open("GET",nocacheurl2,true);
xmlHttp.send(null);
}
// Start the refreshing process
var seconds;
window.onload = function startrefresh(){
setTimeout('refreshdiv()',seconds*1000);
}
Source of index.html:
<script src="ajax3.js"></script>
<script type="text/javascript"><!--
refreshdiv();
// --></script>
Logs<div id="timediv"></div><br>
Points<div id="points"></div><br>
It doesn't work because two div show the same (in this case points). How correct combine scripts?
P.s You can see it in file original.php
Login: testowyuser Pass: testtest then click "Strona Główna"

Answer 1

Something goes last and overlaps the 1st.
It's Ok that you are complaining ;), look here
xmlHttp.open("GET",nocacheurl,true); // opening 1st URI
xmlHttp.send(null); // requresting. in the mean time we've got the response and our `onreadystatechange` function triggers
xmlHttp.open("GET",nocacheurl2,true); // opening 2nd URI
xmlHttp.send(null); // the same situation. received response, triggered function
You are using 1 xmlHTTP instance to request for both. and using it sequentially, but demanding it works simultaneously.
So when the function triggers (doesn't matter 1st or 2nd time) you suppose (but not the script) to have already 2 responses in 1 variable. Moreover, you want script guess what you actually want.
document.getElementById(divid).innerHTML = xmlHttp.responseText; // getting response text from the current response (it can be 1st or 2nd response)
document.getElementById(divid2).innerHTML = xmlHttp.responseText; // and again getting the current response text from the same instance (not the response you are expecting from the next request). so, you are repeating the same for the another <div>
Actually each time you have only one response text. And each time you are putting in your <div's> the same information (copy info over 2 <div's>) bec. there is no info about the next request yet.
And as the result in your script, I suppose, you have always last request copied over 2 <div's>.
Try to create 1 instance per "channel" (1 instance of xmlHTTP for the 1st script to use and 1 for the second) and set them different (separate) onreadystatechange function. This way you will not have overlap of data and will not be tangled.
Far more elegant solution (less refactoring in JS) is to distinguish responses. For e.g. if you are receiving XML, you can parse it for some flag that will tell you that this response is for <div id=divid> and another one is for another <div> or this request is first and this is the second etc.