Welcome to WebmasterWorld Guest from 54.167.5.15

Forum Moderators: open

Message Too Old, No Replies

Ajax load image not going away once initiated

     

tec4

8:56 pm on Nov 30, 2011 (gmt 0)



I'm trying to integrate a load image with an ajax Google maps search tool but when I try to set up the loader image, I cannot seem to get it to go away once the responce has been successful.

Example Code:

function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;

request.onreadystatechange = function() {
if (request.readyState == 4) {
if(request.status == 200) {
request.onreadystatechange = doNothing;
callback(request.responseText, request.status);
}
} else {
document.getElementById('loader').innerHTML = '<img src="/ajax/ajax-loader.gif"/>';
}
};



I've also tried a variation like the below code to put a function in the onreadystatechange....perhaps I need a little more elaborate function tied to it?:

function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;

request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = theHTTPResponse;
callback(request.responseText, request.status);
}
};

request.open('GET', url, true);
request.send(null);
}

function theHTTPResponse() {

document.getElementById('loader').innerHTML = '<img src="/ajax/ajax-loader.gif"/>';

}



But no luck....not sure where to exactly place it/arrange it to make it only show the load icon when the request is being processed.

Thanks in advance for the help!

astupidname

9:58 am on Dec 1, 2011 (gmt 0)

5+ Year Member



function getXhr() {
var xhr = null;
try{//Mozilla, Safari, IE 7+...
xhr = new XMLHttpRequest();
if (xhr.overrideMimeType) {
xhr.overrideMimeType('text/xml');
}
} catch(e) {
try{
xhr = new ActiveXObject("Msxml2.XMLHTTP.6.0");
}catch(e){
try{
xhr = new ActiveXObject("Msxml2.XMLHTTP.3.0");
}catch(e){}
}
}
return xhr;
}

function downloadUrl(url, callback) {
var request = getXhr(),
el = document.getElementById('loader');
if (request === null) {
return alert('Your browser does not support ajax! Please upgrade your browser.');
}
el.innerHTML = '<img src="/ajax/ajax-loader.gif"/>'; //show the loading image right away
request.onreadystatechange = function() {
if (request.readyState == 4) {
el.innerHTML = ''; //the request has been completed, destroy or hide the loading image
if(request.status == 200) {
callback(request.responseText, request.status);
} else {
alert('ERROR: unable to complete request! Status code: '+ request.status);
}
}
};
request.open('GET', url, true);
request.send(null);
}

If anybody's wondering, how to post formatted code on webmasterworld [webmasterworld.com]
Do not copy formatted code on webmasterworld from IE, use other browser such as Firefox.

daveVk

12:07 pm on Dec 1, 2011 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



Rather than setting el.innerHTML, consider loading image with page and hide/show it as required with.

el.style.display = 'none'; // hide
and
el.style.display = ''; // show

while the loader image will probably load quicker than the map, no delay is better.

tec4

11:46 pm on Dec 1, 2011 (gmt 0)



@astupidname - This is great, I really appreciate it - this works very well and makes sense how you set it up so that it would work correctly...guess I just had to see it visually for it to set in, thank you :)

@daveVk - thanks for the advise, modified it so that the image is initially hidden and shown/re-hidden when appropriate - thanks for the tip!

tec4

11:47 pm on Dec 1, 2011 (gmt 0)



P.S - thanks for the link to posting formatted text....was trying to figure that out...what I posted is a bit hard to read through, so thanks for that. Next post will be formatted :)
 

Featured Threads

Hot Threads This Week

Hot Threads This Month