I was actually not going to, and am afraid of asking such a silly question, but i have completely no clue what is going wrong here.
My JavaScript
function ahah(url, target) {
document.getElementById(container).innerHTML = ' Fetching data...';
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
}
if (req != undefined) {
req.onreadystatechange = function() {ahahDone(url, target);};
req.open("GET", url, true);
req.send("");
}
}
function ahahDone(url, target) {
if (req.readyState == 4) { // only if req is "loaded"
if (req.status == 200) { // only if "OK"
document.getElementById(container).innerHTML = req.responseText;
} else {
document.getElementById(container).innerHTML=" AHAH Error:\n"+ req.status + "\n" +req.statusText;
}
}
}
function load(name, div) {
ahah(name,div);
return false;
}
My HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<title>Container</title>
<!-- GET YOURSELF SOME JAVASCRIPT -- >
<script type="text/javascript" src="mootools.svn.js"></script>
<!--script type="text/javascript" src="js/jQuery.js"></script-->
<script type="text/javascript" src="js/reflection.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<!--script type="text/javascript" src="js/javas.js"></script-->
<script type="text/javascript" src="js/getstuff.js"></script>
<script type="text/javascript" src="js/ahah.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
var mySlide = new Fx.Slide('top-panel');
mySlide.hide(); $('toggle').addEvent('click', function(e){
e = new Event(e);
mySlide.toggle();
e.stop();
});
});
</script>
<!--script type="text/javascript" src="js/request.js"></script-->
</head>
<link rel="stylesheet" type="text/css" href="style.css" />
<body onload="getlogo()">
<div id="top-panel">
<!-- Top Panel content here -->
<table class="panel" border="0" width="100%" align="center">
<tr>
<td></td>
<td align="left" width="15%">
<ul>
<li> <a href="index.html" class="panel">Home (F5)</a></li>
<li> <a href="#" class="panel" onclick="gettermine()">Termine</a></li>
<li> <a href="#" class="panel" onclick="getsomethingelse()">Material</a></li>
</ul>
</td>
<td align="left" width="30%">
<ul>
<li> <a href="#" class="panel" onclick="getsomethingelse()">Flechten mit frischen Weiden</a></li>
<li> <a href="#" class="panel" onclick="getsomethingelse()">Flechten mit getrockneten Weiden</a></li>
<li> <a href="#" class="panel" onclick="getanfahrt()">Anfahrt</a> </li>
</ul>
</td>
<td align="left" width="15%">
<ul>
<li> <a href="#" onclick="getsomethingelse()" class="panel">Hauswurz</a> </li>
<li> <a onclick="getsomethingelse()" href="#" class="panel">Kontakt</a> </li>
<li> <a onclick="getsomethingelse()" href="#" class="panel">Impressum</a> </li>
</ul>
</td>
<td align="left" width="15%">
<ul>
<li> <a href="#" onclick="getsomethingelse()" class="panel">Support</a> </li>
<li> <a href="about.html" onclick="load('about.html','container');return false;" class="panel">Profil</a> </li>
</ul>
</td>
</tr>
</table>
</div>
<div id="sub-panel">
<a href="#" id="toggle"><span>Mehr</span></a>
</div>
<!--div id="container"-->
<div id="container">
<div id="logo">
<!--img src="img/logo.png"-->
</div>
<div align="center" id="tagline">
<a onclick="getanfahrt()" class="navlink" href="#">Fricker 1, 88285 Bodnegg</a> | <a href="#" class="navlink" onclick="getkontakt()">07520/914249</a> | <a class="navlink" href=mailto:[email protected]>[email protected]</a>
</div>
</div>
</body>
</html>
The JavaScript should be executed by the link:
<a href="about.html" onclick="load('about.html','container');return false;" class="panel">
But when the link is clicked, nothing happens. Firebug says that everything is loaded fine.
It would be really great if someone would leave the answer with a short explanation!
Thanks a lot in advance!