Originally Posted by
Ducimus
CE - I didn't mention, but in this case the product pages are within my domain, not external sources. (And PHP is not a thing I know antything about yet)
M - your second example looks closer to what i'm trying to accomplish but will still have to muddle thru it a bit
I'm sure i'll have more q's before i'm thru here
That was a critical information that you've missed to furnish in your posting. If the page you are trying to load in another page is in your domain then we can go for AJAX. But personally I feel that if you can use a solution based on Server-side like SSI (server-side includes), PHP, etc.
Please find an AJAX based solution below which includes a HTML page file content in a div element in another page.
Code:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>An XHTML 1.0 Strict standard template</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">
</style>
<script type="text/javascript">
function ajaxFunction(id, url){
var xmlHttp;
try {// Firefox, Opera 8.0+, Safari
xmlHttp = new XMLHttpRequest();
} catch (e) {// Internet Explorer
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
alert("Your browser does not support AJAX!");
return false;
}
}
}
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4) {
//Get the response from the server and extract the section that comes in the body section of the second html page avoid inserting the header part of the second page in your first page's element
var respText = xmlHttp.responseText.split('<body>');
elem.innerHTML = respText[1].split('</body>')[0];
}
}
var elem = document.getElementById(id);
if (!elem) {
alert('The element with the passed ID doesn\'t exists in your page');
return;
}
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
}
</script>
</head>
<body>
<div id="test"></div>
<form>
<input type="button" value="Make Ajax Call" id="ajax" onclick="ajaxFunction('test','one.htm');"/>
</form>
</body>
</html>
You can use the code in your case but with your element ID and page name.
Note that in this demo page my assumption is that you just want to load some HTML page content. Thats why I've extracted only those items that falls within its body section. If the body section needs any script file inclusion then you have to change the extraction section according to your needs.
Hope this help
Load external page into <DIV>
Bookmarks