stockapplets — Fri, 13 Jan 2006 17:37:28 +0000

watchout with AJAX, see what good old man Nielsen says about back button

demonhale — Thu, 22 Dec 2005 14:02:08 +0000

I was thinkinf rather simply, I guess a linked targeted at an iframe will do the trick... that is if you want it quick...

timjpriebe — Thu, 22 Dec 2005 12:40:10 +0000

Hey, cool link, CptAwesome. Bookmarked...

Elmo — Thu, 22 Dec 2005 11:23:04 +0000

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?

Elmo — Thu, 22 Dec 2005 10:47:32 +0000

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;
        }
    }
}

CptAwesome — Thu, 22 Dec 2005 10:36:27 +0000

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

Elmo — Thu, 22 Dec 2005 05:07:42 +0000

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.

codehungry — Thu, 22 Dec 2005 03:49:34 +0000

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