problem getting some html includes to display correctly - JavaScript and AJAX forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

problem getting some html includes to display correctly

through div tags

petra

1:44 pm on Jan 25, 2006 (gmt 0)

10+ Year Member

I am having a problem getting some html includes to display correctly through div tags. Using the code shown below, I can get one lot of html to display (header_base), but not the other (information_menu). I want them to display one on top of the other, as they are both images (they have other js code to outline the clickable regions of the images).

This is the HTML code being used:

<html>
<head>
<meta title="INSERT META TITLE HERE" />
<meta description="INSERT META DESCRIPTION HERE" />
<meta keywords="INSERT META KEYWORDS HERE" />
<script language="JavaScript" type="text/javascript" src="clientSideInclude.js"></script>
<title>INSERT PAGE TITLE HERE</title>
</head>
<body onLoad="clientSideInclude('header_base','header_base.htm','information_menu','information_menu.htm');">
<div id="header_base"></div><div id="information_menu"></div>
</body>
</html>

This is the js include being used:

function clientSideInclude(id, url) {
var req = false;
// For Safari, Firefox, and other non-MS browsers
if (window.XMLHttpRequest) {
try {
req = new XMLHttpRequest();
} catch (e) {
req = false;
}
} else if (window.ActiveXObject) {
// For Internet Explorer on Windows
try {
req = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
req = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
req = false;
}
}
}
var element = document.getElementById(id);
if (!element) {
alert("Bad id " + id +
"passed to clientSideInclude." +
"You need a div or span element " +
"with this id in your page.");
return;
}
if (req) {
// Synchronous request, wait till we have it all
req.open('GET', url, false);
req.send(null);
element.innerHTML = req.responseText;
} else {
element.innerHTML =
"Sorry, your browser does not support " +
"XMLHTTPRequest objects. This page requires " +
"Internet Explorer 5 or better for Windows, " +
"or Firefox for any system, or Safari. Other " +
"compatible browsers may also exist.";
}
}

johnl

1:59 pm on Jan 25, 2006 (gmt 0)

10+ Year Member

hi,
the function clientSideInclude() in your script takes just two arguments, so perhaps try to call a function Doit() in onLoad:


<body onLoad="Doit();">function Doit()
{
clientSideInclude('header_base', 'header_base.htm');
clientSideInclude('information_menu', 'information_menu.htm');
}

petra

6:39 pm on Jan 25, 2006 (gmt 0)

10+ Year Member

I tried it like this below, but it did not work. I also tried it without the clientSideInclude script tag and without the div tags. I created the js file Doit.js also. Any ideas?

<html>
<head>
<meta title="INSERT META TITLE HERE" />
<meta description="INSERT META DESCRIPTION HERE" />
<meta keywords="INSERT META KEYWORDS HERE" />
<script language="JavaScript" type="text/javascript" src="Doit.js"></script>
<script language="JavaScript" type="text/javascript" src="clientSideInclude.js"></script>
<title>INSERT PAGE TITLE HERE</title>
</head>
<body onLoad="Doit();">
<div id="header_base"></div>
<div id="information_menu"></div>
</body>
</html>

johnl

10:48 pm on Jan 25, 2006 (gmt 0)

10+ Year Member

but it did not work

supposing this still means you get the first div filled and not the second, one would perhaps try

- exchanging the 2 calls to clientSideInclude() - does it show the 'information menu' then?

- if no, is the filename on the disk really 'information_menu.htm'? does it validate?

its hard to guess more, as you don't provide a full example, - it works on my browser though (mozilla 1.7.5 ) filling both div's.
if you dont get it working, you might send me a sticky mail with all of the files of your not working project.