Ajax Dynamic Content Not Working

**Amphios** · January 14th, 2012 01:27 PM

Hi guys,

little snag I've run into. I'm wanting to use iFrames again but it wont seem to work. I've got it all set up, but when you click the iframe it removes everything but doesnt add the new content I want to show.

Index:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
<html>
<head>
	<title> Amphicraft - True Minecraft Servers </title>
	<script type="text/javascript">
/***********************************************
* Dynamic Ajax Content- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""

function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
} 
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}

function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}

function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments[i]
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}

</script>
	
<head>
<body background="images/bg.png">

<div id="bar2">
	<center>
		<a href="javascript:ajaxpage('home.html', 'contentarea');">Test</a>
	</center>
</div>
<div id="bar1"></div>

<div id="contentarea">

<div id="leftcolum">
	Testing
</div>

<div id="rightcolum">
	Testing
</div>


</div>

</body>
</html>

CSS:

Code:

html {
	border: 0;
	margin: 0;
}

body {
	border: 0;
	margin: 0;
}

.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.left {
	float: left;
}

.right {
	float: right;
}

#contentarea {
	height: 100%;
	width: 1080px;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

#rightcolum {
	width: 400px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	float: right;
}

#leftcolum {
	float: left;
	width: 660px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding-left: 20px;
}

#bar1 {
	background-image: url(images/bar1.png);
	height: 120px;
	width: 100%;
}

#bar2 {
	background-image: url(images/bar2.png);
	height: 60px;
	width: 100%;
}

Page I want to be displayed when you click the iFrame:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
<html>
<head>
	<title> Amphicraft - True Minecraft Servers </title>
<head>
<body>

<div id="leftcolum">
Testing
</div>

<div id="rightcolum">
Testing
</div>

</body>
</html>

Before click:

After click:

Any help would be great!

**sitewhisper** · May 18th, 2012 04:51 AM

Are you sure the requesting URL by ajax is in the same domain name?

Ajax can't cross-domain by defult.

Thread: Ajax Dynamic Content Not Working

Thread Tools

Display

Ajax Dynamic Content Not Working

Re: Ajax Dynamic Content Not Working

Bookmarks

Bookmarks

Posting Permissions