AJAX activity indicator

[Dan06]

I would like to have an AJAX activity indicator (a gif image I made) to display in a specific div while the AJAX activities are being completed. What is the best way to accomplish this?

[rhodesa]

just set the CSS display attribute to 'none', when the ajax starts, set it to '', then back to 'none' when it's done.

<img id="loading" src="images/loading.gif" style="display:none" />

 

Just before the ajax starts:

document.getElementById('loading').style.display = '';

 

After the ajax is done:

document.getElementById('loading').style.display = 'none';

[Dan06]

I meant to post this question in the AJAX section - I had multiple tabs open and I posted here by accident. But since, I got a response I'd like to clear up a couple of things.

 

Rather than showing/hiding an image in the markup I want to display the gif in a div and then replace the gif with what the AJAX function returns. I attempted this earlier via:

document.getElementById("targetDiv").innerHTML = <img src="images/progress.gif"/>

 

I placed the above code right before I sent the parameters, i.e.

document.getElementById("targetDiv").innerHTML = <img src="images/progress.gif"/>
XMLHttpRequestObject.send(parameters);

 

And using a callback function, the contents of the "targetDiv" is replaced with the AJAX response.

 

Problem with the above code is instead of showing the activity indicator gif, what seems to be an image placeholder is shown and then it is replaced by the AJAX response content. Everything besides the activity indicator gif shows/acts as intended.

 

Is the placement of my .innerHTML piece of code be wrong? Am I approaching my goal the wrong way?

[rhodesa]

document.getElementById("targetDiv").innerHTML = <img src="images/progress.gif"/>

 

should be:

document.getElementById("targetDiv").innerHTML = '<img src="images/progress.gif"/>';