Best way to update content without refresh.

Elmo posted this at 05:25 — 20th December 2005.

They have: 4 posts

Joined: Dec 2005

I want to have my site take less time to load and be nicer to navigate, so I want components to stay loaded during the whole time you're on the site. Like how Gmail works.

Basically have a header and footer which loads on the first visit, then a middle section which changes without refreshing the whole page.

What is the best way to implement this? I'm looking for a solution that uses HTML, CSS, Javascript or PHP. I tried using some AJAX techniques but can't get it working.

Any ideas? Including code examples if you can.

Thanks.

codehungry posted this at 03:49 — 22nd December 2005.

He has: 10 posts

Joined: Feb 2004

Hi Elmo,

Most people accomplish this using AJAX or hidden DIV tags which are only shown when needed. Using option to can of course make your page load slower, depending on how many hidden DIV tags you hide, etc...

function displayMenu(f) {

	if(f==1) {
		document.getElementById("login").style.display="none";
		document.getElementById("signup").style.display="block";
	} else {
		document.getElementById("login").style.display="block";
		document.getElementById("signup").style.display="none";
	}

}

Good Luck!

Andrew Schools

Elmo posted this at 05:07 — 22nd December 2005.

They have: 4 posts

Joined: Dec 2005

Thanks for the suggestions. I've thought of hidden DIVs before, however it would make the page take longer to load.

I'm looking for a solution that will load the content of the DIVs only when requested.

CptAwesome posted this at 10:36 — 22nd December 2005.

He has: 370 posts

Joined: Dec 2004

Yeah, that's AJAX/AHAH here's a really simple example of it:
http://homepage.mac.com/kevinmarks/staticjah.html

Elmo posted this at 10:47 — 22nd December 2005.

They have: 4 posts

Joined: Dec 2005

I've got this working using a simple test page similar to the example there.

However, as soon as I try to put this into my site it only works in firefox and not IE.

This is my code:

<html>
<head>
<title>Untitled Document</title>
<link href="style_sheets/3wgweb2-01.css" rel="stylesheet" type="text/css">
&lt;script language="javascript1.3" src="jah.js" &gt;&lt;/script&gt;
</head>

<body>
<?php include 'header.php'; ?>

<a href="javascript:jah('body.php','target');">Body</a>
<a href="javascript:jah('body2.php','target');">Body 2</a>

<div id="target">
content here
</div>


<?php include 'footer.php'; ?>
</body>
</html> 

In firefox it works. It loads the header, loads the DIV with the placeholder text, then loads the footer. Clicking on the links changes the DIVs to the content of "body.php" and "body2.php".

In Internet Explorer I get an "Unknown Runtime Error" when clicking either of the links.

For people not familiar with the example in the link above, here are the contents of the "jah.js" file:

function jah(url,target) {
    // native XMLHttpRequest object
    document.getElementById(target).innerHTML = 'sending...';
    if (window.XMLHttpRequest) {
        req = new XMLHttpRequest();
        req.onreadystatechange = function() {jahDone(target);};
        req.open("GET", url, true);
        req.send(null);
    // IE/Windows ActiveX version
    } else if (window.ActiveXObject) {
        req = new ActiveXObject("Microsoft.XMLHTTP");
        if (req) {
            req.onreadystatechange = function() {jahDone(target);};
            req.open("GET", url, true);
            req.send();
        }
    }
}    

function jahDone(target) {
    // only if req is "loaded"
    if (req.readyState == 4) {
        // only if "OK"
        if (req.status == 200) {
            results = req.responseText;
            document.getElementById(target).innerHTML = results;
        } else {
            document.getElementById(target).innerHTML="jah error:\n" +
                req.statusText;
        }
    }
}

Elmo posted this at 11:23 — 22nd December 2005.

They have: 4 posts

Joined: Dec 2005

OK I've got it working.

The thing I can't do now is to get it to update 2 areas with one link.

I'm trying to use:

<a href="javascript:jah('body.php','target');javascript:jah('linkbar3.php','linkbar2');">Test</a>'

However all it does is the second function, and if I click the link again it repeats the second function but loads the output into the DIV with id "target".

Any ideas?

timjpriebe posted this at 12:40 — 22nd December 2005.