XMLHTTP Request Progress Status

[JoJoJohnson]

I've created a script (see this post for my original problem [webmasterworld.com...] which sends off multiple XMLHTTP requests.

Here are the 2 scripts:

default.asp
===========

<script language="javascript"> 
 function submitTrades() 
 { 
  for (intCount=0; intCount<form.checkbox.length; intCount++) 
  { 
   if(document.getElementById('checkbox_'+intCount).style.display == 'block' && form.checkbox[intCount].checked == true) 
   { 
    document.getElementById('checkbox_'+intCount).style.display = 'none' 
    document.getElementById('result_'+intCount).style.display = 'block' 
    document.getElementById("result_"+intCount).innerHTML = 'Submitting...'; 
    updatePosition(intCount); 
   } 
  } 
 } 
 function updatePosition(intTrade) 
 { 
  var strPage = 'load.asp'; 
  var xmlHTTP = new ActiveXObject("Microsoft.XMLHTTP"); 
  xmlHTTP.onreadystatechange=function() 
  { 
   if(xmlHTTP.readyState == 4) 
   { 
    document.getElementById('result_'+intTrade).innerHTML = xmlHTTP.responseText; 
   } 
  }  
  xmlHTTP.open("GET", strPage, false); 
  xmlHTTP.send(null); 
  xmlHTTP = null 
 } 
</script> 
<table border="1"> 
<form name="form"> 
<% 
 for intCount = 0 to 5 
%> 
  <tr> 
   <td> 
     <div id="checkbox_<% =intCount %>" style="display:block"><input type="checkbox" name="checkbox" value="<% =intCount %>" CHECKED></div> 
     <div id="result_<% =intCount %>" style="display:none"></div> 
   </td> 
  </tr> 
<% 
 next 
%> 
<tr> 
 <td><input type="button" value="Submit" onClick="return submitTrades()"></td> 
</tr> 
</form> 
</table> 

load.asp
========

<% 
 for intCount = 0 to 10000000 
 next 
%> 
Done 

I inserted the for loop into the load.asp to recreate the rough time it would take to execute each script once I've finished coding that page.

Ideally, I'd like it so that from the first checkbox it says "Submitting...." then changes to "Done" before moving onto the next checkbox in a nice gradual AJAX style completion progress.

Instead when you press submit, all of the checkboxes display until the script completes and then the text "Done" displays on all rows at once.

Is there anyway to control the script so that it changes the display of each row one by one?

[daveVk]

TRY

function updatePosition(intTrade)
{
var strPage = 'load.asp';
var xmlHTTP = new ActiveXObject("Microsoft.XMLHTTP");
xmlHTTP.open("GET", strPage, false);
xmlHTTP.send(null);
document.getElementById('result_'+intTrade).innerHTML = xmlHTTP.responseText;
xmlHTTP = null
}

You are using the synch option xmlHTTP.open("GET", strPage, false), onreadystatechange is not required in this case

The downside of using synch if that browser will freeze for some minutes if server not responding, the upside is its simplicity.

[JoJoJohnson]

thanks, but unfortunately I get the same problem when using that code too!

[daveVk]

Just noticed you are asking for same page 'load.asp' each time, perhaps it is cached on first request, should it be something like "load.asp?"+intCount?

[JoJoJohnson]

Yep same problem. I added a querystring to the call and put <% repsonse.expires = -1 %> at the top of load.asp to try and stop any caching issue but still the same problem!

[daveVk]

For test purposes add timestamp (recd and sent if possible ) and echo of request url to request reply, not familiar with asp, but assume can be done.

Also server log may give some clues.