Tweet
In the following code my efforts loading content1-4 via AJAX, into a dynamically created container, has the HTML snippets returning literally,(can see the HTML elements) and the dynamic element is not cleared, the next snippet is simply added to the tree.
Using innerHTML works fine, but not the exercise. I'm confident someone has done this and has a solution at this forum.
I've googled and only found references to this anomaly happening with jQuery.
--------------Using innerHTML------------------
Using innerHTML works fine, but not the exercise. I'm confident someone has done this and has a solution at this forum.
I've googled and only found references to this anomaly happening with jQuery.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample 2_1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
<!--
//Create a boolean variable to check for a valid Internet Explorer instance.
var xmlhttp = false;
//Check if we are using IE.
try {
//If the Javascript version is greater than 5.
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
alert ("You are using Microsoft Internet Explorer.");
} catch (e) {
//If not, then use the older active x object.
try {
//If we are using Internet Explorer.
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
alert ("You are using Microsoft Internet Explorder");
} catch (E) {
//Else we must be using a non-IE browser.
xmlhttp = false;
}
}
//If we are using a non-IE browser, create a javascript instance of the object.
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
xmlhttp = new XMLHttpRequest();
alert ("You are not using Microsoft Internet Explorer");
}
function makerequest(serverPage, objID) {
var obj = document.getElementById(objID);
xmlhttp.open("GET", serverPage);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
createDisplayElement(objID);
}
}
xmlhttp.send(null);
}
function createDisplayElement(objID){
var obj = document.getElementById(objID);
var para = document.createElement("p");
obj.appendChild(para);
var txtNode = document.createTextNode(xmlhttp.responseText);
para.appendChild(txtNode);
}
//-->
</script>
<body onload="makerequest ('content1.html','hw')">
<div align="center">
<h1>My Webpage</h1>
<a href="content1.html" onclick="makerequest('content1.html','hw'); return false;">Page 1</a> | <a href="content2.html" onclick="makerequest('content2.html','hw'); return false;">Page 2</a> | <a href="content3.html" onclick="makerequest('content3.html','hw'); return false;">Page 3</a> | <a href="content4.html" onclick="makerequest('content4.html','hw'); return false;">Page 4</a>
</div>
<div id="hw"></div>
</body>
</html>
--------------Using innerHTML------------------
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sample 2_1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
<!--
//Create a boolean variable to check for a valid Internet Explorer instance.
var xmlhttp = false;
//Check if we are using IE.
try {
//If the Javascript version is greater than 5.
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
alert ("You are using Microsoft Internet Explorer.");
} catch (e) {
//If not, then use the older active x object.
try {
//If we are using Internet Explorer.
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
alert ("You are using Microsoft Internet Explorder");
} catch (E) {
//Else we must be using a non-IE browser.
xmlhttp = false;
}
}
//If we are using a non-IE browser, create a javascript instance of the object.
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
xmlhttp = new XMLHttpRequest();
alert ("You are not using Microsoft Internet Explorer");
}
function makerequest(serverPage, objID) {
var obj = document.getElementById(objID);
xmlhttp.open("GET", serverPage);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
obj.innerHTML = xmlhttp.responseText;
}
}
xmlhttp.send(null);
}
/**
function createDisplayElement(objID){
var obj = document.getElementById(objID);
var para = document.createElement("p");
obj.appendChild(para);
var txtNode = document.createTextNode(xmlhttp.responseText);
para.appendChild(txtNode);
}/
**
//-->
</script>
<body onload="makerequest ('content1.html','hw')">
<div align="center">
<h1>My Webpage</h1>
<a href="content1.html" onclick="makerequest('content1.html','hw'); return false;">Page 1</a> | <a href="content2.html" onclick="makerequest('content2.html','hw'); return false;">Page 2</a> | <a href="content3.html" onclick="makerequest('content3.html','hw'); return false;">Page 3</a> | <a href="content4.html" onclick="makerequest('content4.html','hw'); return false;">Page 4</a>
<div id="hw"></div>
</div>
</body>
</html>
Comment