UPDATE:
Greetings! I have developed a navigation bar that loads various pages into a specific div. Here is the source code for the navigation bar:
<div id="navBar">
<ul>
<li><a href="#" onClick="document.getElementById('bottom').innerHTML = loadPage('hello-world.html');">Home</a></li>
<li><a href="about.php" onClick="document.getElementById('bottom').innerHTML = loadPage('hello-world.html');">Staff</a></li>
<li><a href="goodies.php" onClick="document.getElementById('bottom').innerHTML = loadPage('hello-world.html');">Goodies</a></li>
<li><a href="stuff.php" onClick="document.getElementById('bottom').innerHTML = loadPage('hello-world.html');">Events</a></li>
<li><a href="#/contact.php" onClick="document.getElementById('bottom').innerHTML = loadPage('load.php');">News</a></li>
<li><a href="#" onClick="document.getElementById('bottom').innerHTML = loadPage('hello-world.html');">Games Center</a></li>
<li><a href="phptesting.php" onClick="document.getElementById('bottom').innerHTML = loadPage('hello-world.html');">Habbo</a></li>
</ul>
This is the designated div where the text is placed:
<!-- Main Body -->
<div id="right">
<a id="bottom">
</div></a>
Next, here is the javascript function that retrieves the file and inserts it into the div:
function loadPage(href)
{
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", href, false);
xmlhttp.send();
return xmlhttp.responseText;
}
At this point, when a navigation item like "Home" is clicked, the corresponding text loads within the designated div. However, when I add this additional code to load the text when the page loads:
<script>
function loadXMLDoc(filename) {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
after_load_function(xmlhttp.responseText);
}
}
xmlhttp.open("GET",filename,true);
xmlhttp.send();
}
function after_load_function(responseText) {
document.getElementById("right").innerHTML = responseText;
}
window.onload = function() {
loadXMLDoc("welcome.html");
}
</script>
Unexpectedly, this causes the pages to stop loading altogether. However, removing the code allows the functionality to return. Any suggestions or ideas on why this is occurring?