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
LVL 7
minnirokAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.