Dynamic Ajax Content --- 'Loading Content' Alert

[snapple_pitchcock]

1) Script Title: Dynamic Ajax Content

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...jaxcontent.htm

3) Describe problem:

I would like the Dynamic Ajax Content script to alert users that the script is working and a new page is loading. This will come in handy in case the file is big. I thought something to the effect of:

document.getElementById("rightcolumn").innerHTML = 'Loading content';

might work but couldn't get it (or other variations) to work in the original DD script. Maybe someone has already solved this problem?

Thanks in advance for any leads.

[jscheuer1]

That's the right idea. You just need to find the right spot for it. I vote for here:

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
document.getElementById(containerid).innerHTML = 'Loading content';
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

[snapple_pitchcock]

jscheuer1: That works like a charm!! Excellent.

Thanks a million.

[Strangeplant]

And thanks from me,too. I've wanted to do that for a while, now.....but I would like the classic rotating loading.gif from many of DD's other scripts. Could it be done with this written as innerhtml?:

<a href="#" id="loadingLink"><img src="images/loading.gif"></a>

And use CSS to control where you want it via the id?

[jscheuer1]

Why not? However, there is no need to have a link to nowhere, I'd try:

document.getElementById(containerid).innerHTML = '<table style="border-collapse:collapse;height:100%;width:100%;"><tr><td align="center" valign="middle"><img src="loading.gif"><\/td><\/tr><\/table>';

But, for this to work out in all browsers, and depending upon your DOCTYPE, and the container's style, the dimensions of the table may need to be set using fixed units like pixels or ems. If the container is position:relative or absolute, you may use the much simpler:

<img style="position:absolute;top:50%;left:50%;width:128px;height:128px;margin:-64px 0 0 -64px;" src="loading.gif">

The key being that the width and height be specified in the style as the actual width and height of the image and that the negative margin values be half the height and half the width, respectively. This works in all DOCTYPES in all modern and a quite a few not so modern browsers. But, as mentioned, requires an absolutely or relatively positioned container division. Positioning a division relatively (just to take advantage of this) usually makes little difference to its flow in the rest of the document.