• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 426
  • Last Modified:

some progress indicator during http request

Hi,

Does anyone have some sample code for showing a little progress bar when an ajax operation is happening? I have something like:

function StartRequest()
{
    alert("start ajax call");
    httpRequestObject.sendRequest(..);
}

function HandleResponse()
{
    alert("ajax call done");
}

Is there anyway to measure progress of the call to give some visual representation of it? Should I just set an image to say 'loading' in StartRequest(), then hide it whenever HandleResponse() executes?

Any ideas would be great,

Thanks
0
minnirok
Asked:
minnirok
1 Solution
 
nito8300Commented:
place this within the body tag

<div align="left">
  <table>
    <tr>
      <td>
        <div style="BORDER-RIGHT: black 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: black 1px solid; PADDING-LEFT: 2px; FONT-SIZE: 8pt; PADDING-BOTTOM: 2px; BORDER-LEFT: black 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: black 1px solid">
          <span id="progress1">&nbsp; &nbsp;</span> <span id="progress2">&nbsp;&nbsp;</span> <span id="progress3">&nbsp;
          &nbsp;</span> <span id="progress4">&nbsp; &nbsp;</span> <span id="progress5">&nbsp;
          &nbsp;</span> <span id="progress6">&nbsp; &nbsp;</span> <span id="progress7">&nbsp;
          &nbsp;</span> <span id="progress8">&nbsp; &nbsp;</span> <span id="progress9">&nbsp;
          &nbsp;</span>
        </div>
 </td>
    </tr>
 
  </table>
</div>
<!-- Demonstration -->
<script language="javascript">
var progressEnd = 9;      
var progressColor = '3A76BC';
var progressInterval = 50;

var progressAt = progressEnd;
var progressTimer;
function progress_clear() {
      for (var i = 1; i <= progressEnd; i++) document.getElementById('progress'+i).style.backgroundColor = 'transparent';
      progressAt = 0;
}
function progress_update() {
      progressAt++;
      if (progressAt > progressEnd) progress_clear();
      else document.getElementById('progress'+progressAt).style.backgroundColor = progressColor;
      progressTimer = setTimeout('progress_update()',progressInterval);
}
function progress_stop() {
      clearTimeout(progressTimer);
      progress_clear();
}
progress_update();
</script>
0
 
nabsolCommented:
0
 
raj3060Commented:
Some modification to @nito8300's solution..

+++++++++++++++++++++++++
<div align="center">
  <table>
    <tr>
      <td>
        <div style="BORDER: black 1px solid; PADDING: 1px;width:205;height:15;">
          <span id="progress" style="height:15;width:10;"></span>                        
        </div>
 </td>
    </tr>
 
  </table>
</div>
<!-- Demonstration -->
<script language="javascript">
var progressEnd = 100;    
var progressColor = '#DD0000';
var progressInterval = 20;
var spanWidth = 0;
var progressAt = 0;
var progressTimer;
function progress_clear() {    
             document.getElementById('progress').style.backgroundColor = 'transparent';
             spanWidth = 0;
     progressAt = 0;
}
function progress_update() {                  
             progressAt++;
     if (progressAt > progressEnd)
                         progress_clear();
     else
             document.getElementById('progress').style.width = spanWidth;
             document.getElementById('progress').style.backgroundColor = progressColor;
     progressTimer = setTimeout('progress_update()',progressInterval);
             spanWidth += 2
}
function progress_stop() {
     clearTimeout(progressTimer);
     progress_clear();
}
progress_update();
</script>
+++++++++++++++++++++++++

-raj-
0
 
kernelv12Commented:
Hi,

I don't really see the advantage a timer controlled js progress indicator has over say an animated gif, because neither of them indicates the real progress of the operation. I'd suggest you simply show an image, like you said.
If we are talking about a really long operation, and you want to show a "serious" progressbar you have to set up callbacks and a polling system, to check the status periodically.
You can read about this in detail here: http://codebetter.com/blogs/brendan.tompkins/archive/2006/04/18/143041.aspx

regards,
Kernel
0
 
minnirokAuthor Commented:
I have to agree with kernelv12 on this - I've decided to just show an animated gif to indicate something is happening, so please wait, etc.

Thanks
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now