homepage Welcome to WebmasterWorld Guest from 54.163.72.86
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Ajax load image not going away once initiated
tec4




msg:4392674
 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




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

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




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

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




msg:4393206
 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




msg:4393207
 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 :)

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved