Jump to content

AJAX activity indicator


Dan06

Recommended Posts

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';

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?

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.