how to get div content from different page

**gib65** · 08-13-2012, 06:47 PM

Hello,

I'm trying to add contents to a div and I want to do it by referring to another file. I know that in iframes I can say sc="myfile.html" and get the same effect. This doesn't seem to work in divs though. Many google hits tell me to use php, as in:

<div id="mydiv"><?php include("myfile.html"); ?></div>

but 1) my server doesn't have a php engine, and 2) I want to be able to manipulate the src attribute (or whatever attribute it is) in javascript, as in:

var mydiv = document.getElementById("mydiv");
mydiv.setAttribute("src", "myotherfile.html");

How can I do this with divs?

**bernie1227** · 08-13-2012, 08:47 PM

As far as I know that's not really practical, a suggestion is setting up a JavaScript array with different content on it and then changing the content of the div to whichever part of the array you feel like.

**jscheuer1** · 08-13-2012, 09:04 PM

AJAX.

The easiest way to use AJAX is with jQuery:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
	$('#mydiv').load('somepage.htm');
});
</script>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>

Both pages must be on the same domain though. And this will often fail unless the pages are live, as most browsers have restrictions on this sort of thing if performed on the hard drive because it could be used to execute programs.

AJAX only brings the content of the page. If you want to execute scripts upon that content, you can use the callback of jQuery's .load() function. But that's a different topic.

jQuery's .load() function is only one (probably the simplest) of many jQuery AJAX functions and has a few options. Other jQuery AJAX functions have many more options. So, it depends upon what exactly you need to do as to which to use and which options to set and how they should be set.

They all use jQuery's .ajax() function. So you can read the overview of all that's available with that here:

http://api.jquery.com/jQuery.ajax/

It even includes a way to import and run scripts. However, in my experience it's better to have the scripts available already and just run them against the new content once it arrives. Adding and running scripts can be great, but generally as a separate thing, for other reasons.

If you want a page from another domain and/or want it to run its scripts without any additional code, you can use an iframe though. Just put the iframe in the div. But that has other issues as I'm sure you're aware.

If you could be more precise about exactly what this is for, I could probably be more specific as to what I think the best approach would be.

**molendijk** · 08-13-2012, 10:29 PM

This also seems to work:

Code:

<a onclick="frames['external_content'].location.replace('somepage.html')">load external</a>
<div id="mydiv"></div>
<iframe name="external_content" src="about:blank" style="width:0px; height: 0px; display:none" onload="document.getElementById('mydiv').innerHTML=frames['external_content'].document.documentElement.innerHTML"></iframe>

But it's not very standard.
Arie.

**keyboard** · 08-13-2012, 10:54 PM

You can do it with a iframe and just hide the borders (then put iframe inside of the div and make it resize to the div)-

Code:

<iframe src="http://www.dynamicdrive.com" width="300" height="300" scrolling="no" frameBorder="0" id="iframe1">Browser not compatible.</iframe>

This makes it really easy to edit the src attribute -

Code:

document.getElementById('iframe1').src = "new url";

The above would only work if you don't have to edit the contents of the page...

**gib65** · 08-13-2012, 11:13 PM

I've modified my code to use jquery as you suggested, jscheuer. It now looks like this:

Code:

...
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" />
	
	<script type="text/javascript" language="javascript">
...
		function loadContent(elementSelector, sourceUrl)
		{
			$("" + elementSelector + "").load("http://localhost/" + sourceURL + "");
		}
	
	</script>
...
		<div id="nuts_and_bolts" class="menu"
		onmouseover="toggleItalic('nuts_and_bolts'); return false;"
		onmouseout="toggleItalic('nuts_and_bolts'); return false;">
			<a href="javascript:loadContent('#content', 'nuts_and_bolts.html');">
				Nuts & Bolts
			</a>
		</div>
...

But this is not working (oddly enough, my toggleItalic(...) function is no longer working now either). I'm running this on localhost. Could that be a problem?

**GSimon** · 08-13-2012, 11:31 PM

I am new to using Ajax also and found this example to be pretty useful:

http://www.dynamicdrive.com/dynamici...jaxcontent.htm

maybe you'll have better luck modifying that to what you're doing.

**jscheuer1** · 08-14-2012, 12:18 AM

Originally Posted by gib65

I've modified my code to use jquery as you suggested, jscheuer. But this is not working (oddly enough, my toggleItalic(...) function is no longer working now either). I'm running this on localhost. Could that be a problem?

This:

Code:

$("" + elementSelector + "").load("http://localhost/" + sourceURL + "");

Should be:

Code:

$(elementSelector).load("http://localhost/" + sourceURL);

But I think what you have there is workable/equivalent. Either way, it's looking for nuts_and_bolts.html in the root folder of the localhost server (usually the www or html folder). If that file isn't there, it won't find it. Or if you are running the file without/outside the localhost, that would also be a problem. The toggle function isn't shown, so I have no idea what's going on with that.

Using a localhost server is fine as long as it behaves like a live server - most do. Though, as I say, you have to be on it.

And I can't easily diagnose it from there.

If you want more help, please put up a live demo of the page so we can check it out.

**molendijk** · 08-14-2012, 10:47 AM

Hello Gib65,
If you don't or can't use the Ajax solution explained by John, you can use an elaborated version of what I proposed above. The onclick can be replaced by an onload. Scripts belonging to the external file (here: external.html) must be brought in separately (just as in the Ajax case). I tested it with all browsers. Seems to work well. With Google Chrome, it only works on the Internet (doesn't work when used locally).

Code:

<!doctype html>
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title></title>
<script>
function load_iframe(iframe_name,url)
{
frames[iframe_name].location.replace(url)
}
function iframecontent_to_div(div,iframe_name)
{
document.getElementById(div).innerHTML=frames[iframe_name].document.documentElement.innerHTML
}

function remove_iframecontent_from_div(div)
{
document.getElementById(div).innerHTML=''
}

</script>

<style>
.hidden_iframe{position: absolute; left:-10000px; display: none}
</style>

<body>

<!-- load the hidden iframe that is used for transferring content to a div -->
<a href="javascript: void(0)" onclick="load_iframe('external_content','external.html'); return false">load external</a>

<!-- Empty the div  -->
&nbsp;&nbsp;<a href="javascript: void(0)" onclick="remove_iframecontent_from_div('mydiv'); return false">remove external</a>

<!-- when the iframe is fully loaded, its content will be transferred to the div thank to the 'onload' -->
<iframe name="external_content" src="about:blank" class="hidden_iframe" onload="iframecontent_to_div('mydiv','external_content')"></iframe>

<!-- The div into which the external content must be inserted  -->
<div id="mydiv"></div>

</body>

</html>

Arie.

**gib65** · 08-14-2012, 09:47 PM

Thanks everyone for your help.

jscheuer1,

I'll see about getting a live demo up as soon as I can, but it may take a while since I'm in Mexico with poor internet connection.

molendijk,

Thanks for the advice. I'm sure that works but I'm trying to avoid iframes. I've been thinking of doing something similar with divs: have all the divs on the page at once and toggle their visibility with the links.

Thread: how to get div content from different page

Thread Tools

Search Thread

how to get div content from different page

Bookmarks

Bookmarks

Posting Permissions