PDA

View Full Version : Ajax Content into div with loading message



b0bro'
07-31-2008, 02:21 PM
1) Script Title: Ajax Content

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

3) Describe problem:

No problem script works great, was wondering does anyone know how i can display a 'Loading Page' Message while its loading larger files.

I really want this feature and would appreciate any help.

Byron

ddadmin
07-31-2008, 07:05 PM
Sure, simply find the below line inside the script, and add beneath it the new one in red:


return false
document.getElementById(containerid).innerHTML="Loading External page..."

b0bro'
08-04-2008, 12:20 AM
Thank you so much, I will test it right away!

b0bro'
08-11-2008, 02:17 AM
Okay so that works, however:

How do i link to more pages from within a newly loaded page.

For example.
---------------------------------------------------------------------------
From a link in my main menu on the homepage I load staffaccounts.php into my dvContent div

Then from staffaccounts.php I want to link to another page called 'createAccount.php' and have it load into the very same dvContent div
---------------------------------------------------------------------------

Using the same link code, it just seems to hang in limbo??

Any help would be appreciated.
Byron

b0bro'
08-11-2008, 02:48 AM
Nevermind, a mate found my problem.

Had the url wrong, whoops!

b0bro'
08-18-2008, 01:18 AM
Sure, simply find the below line inside the script, and add beneath it the new one in red:


return false
document.getElementById(containerid).innerHTML="Loading External page..."

So Ive been looking at the code a bit and instead added a hidden seperate loading div, reasons being i dont like the previous loaded page disapearing instantly while the next one is loading.

so under return false ive added
document.getElementById('dvLoading').style.display = 'block'

Now my problem is getting it to disapear once the page has loaded.
In a attempt I added this code to the loadpage function

document.getElementById('dvLoading').style.display = 'none'

But it seems to disapear instantly, I dont even see it flash on and off. However the content itself takes a little longer to load. (Tested with large images)

Is it possible to achieve this Show div / Hide div inline with the content??

Byron

b0bro'
08-18-2008, 02:11 AM
Found the problem was missing the {} brackets in the if statment, I hate not being javascript savy!

The following code works if anyone was interested.

else
return false
document.getElementById('dvLoading').style.display = 'block'
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
page_request.open('GET', url, 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
document.getElementById('dvLoading').style.display = 'none'
}
}