PDA

View Full Version : Replacing the content of a div with html from another page

entint
06-07-2005, 06:44 AM
Hi, I was interested to find out if there is a way, using a link, to replace the content of a div with html from another page. I know this could be done using xmlhttprequest or something like that but I'm not quite sure how to implement it. If anyone could help me that would be awesome.

Thanks!
glenngv
06-07-2005, 07:52 AM
After sending the request and checking if the request status is 200 (OK), you can get the response text and set it to a div.

document.getElementById("content").innerHTML = oXmlHttp.responseText;
...
<div id="content"></div>
entint
06-07-2005, 08:14 AM
Okay, I think I got it. What I have so far, which if I understand correctly should work in theory, is the following:

JS File:

var req;
function loadXMLDoc(url)
{
// branch for native XMLHttpRequest object
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send(null);
// branch for IE/Windows ActiveX version
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send();
}
}
}
function processReqChange()
{
// only if req shows "complete"
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
document.getElementById("content").innerHTML = oXmlHttp.responseText;
} else {
alert("There was a problem retrieving
the XML data:\n" + req.statusText);
}
}
}

HTML File:

<a onclick="loadXMLDoc(this)" href="page.html" >Blah</a>

Is this right or am I going in the totally wrong direction? This httprequest object made much more sense to me so I changed it, and I nabbed the status and readyState check too...just making sure I'm putting it together correctly.


[EDIT] well I obviously am doing something wrong because I guess I need to define oXmlHttp , or so firefox tells me. Dunno glenngv what else you got in your big bag o tricks?? ;)
glenngv
06-07-2005, 08:42 AM
oXmlHttp is just a variable referring to the xmlhttp object. So you just replace oXmlHttp with req.

But since processReqChange() function is set as onreadystatechange handler, you can replace all req references to this (in the processReqChange function) to refer to the xmlhttp object. So you don't need to declare req as global variable.
entint
06-07-2005, 08:58 AM
Okay I understand. I just tried it out and I'm still running into a slight problem though, which is that it still doesn't replace the html in the "content" div with the html that's in the "page.html". Any suggestions? Code is as follows:

function loadXMLDoc(url)
{
// branch for native XMLHttpRequest object
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send(null);
// branch for IE/Windows ActiveX version
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = processReqChange;
req.open("GET", url, true);
req.send();
}
}
}
function processReqChange()
{
// only if req shows "complete"
if (this.readyState == 4) {
// only if "OK"
if (this.status == 200) {
if(document.getElementById) {
document.getElementById("content").innerHTML = this.responseText;
}
} else {
alert("There was a problem retrieving the XML data:\n" + this.statusText);
}
}
}

HTML:

<a onclick="loadXMLDoc(this)" href="page.html">Blah</a>

I have a feeling you're going to say something about the way I implemented the a tag... :p

btw, glenngv, you are a master of the code and I bow to you. :p
glenngv
06-07-2005, 09:27 AM
The loadXMLDoc function expects a url, not a link object.

<a onclick="loadXMLDoc(this.href); return false" href="page.html">Blah</a>

But if this is your setup, why not just use iframe?

<a href="page.html" target="content">Blah</a>
<iframe name="content" id="content" src="about:blank"></iframe>

Using iframe is the more appropriate solution. If you use xmlhttp to retrieve the content of a page and then display the whole content in a div, then you would have multiple <html>, <head>, and <body> tags, which is illegal.
entint
06-07-2005, 09:48 AM
Ah but that's where I modified it...all the other html pages are not correctly written html...they are simply the code that is meant to be put within that div, reducing file sizes, therefore reducing bandwidth. It's not a big deal because I don't get very close to my bandwidth limit, but I wanted to use it for this project because it seemed like a great way to do something.

Thanks glenngv, you get my vote for most helpful :D

[EDIT]Okay lol, I think I might be just about done with this because it's still not working. It still doesn't replace the inner html of the "content" div with the html referenced from the page.html using the code you just wrote out for me... :( unless you realize something quickly that could be causing this don't worry about it I'll just use IFrame...I just thought this would be a really neat trick.

btw all my code for this stuff is online at links below:

HTML: http://www.entintdesign.com/tests/filetree.html

JavaScript: http://www.entintdesign.com/tests/default.js

CSS: http://www.entintdesign.com/tests/default.css
entint
06-07-2005, 10:24 AM
One more go? ;) please glenngv? ;)

AHHHHHHHHHHHHHHHHHHHHHHH! Nevermind I figured it out!!!! I switched everything from this back to req in the processReqChange() function and it worked! Thank you so much this is GREAT! couldn't have done it without ya!

:D :D :D :D :D :D
glenngv
06-07-2005, 11:01 AM
Glad you sorted it out. :)
But I was surprised it didn't work using this. Probably because the req variable was global. Try making it local by defining it inside the function.

BTW, you forgot the return false in the onclick handler of the main folder link. Without that, the page goes to # adding that in the history.

<a onclick="flipArrow(this); showElement('folderOne'); return false" href="#">


Thanks glenngv, you get my vote for most helpfulYou can do so in the thread itself. It's in my sig. :D