Log in

View Full Version : 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:


<!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:

<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)-


<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 -


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:



...
<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/dynamicindex17/ajaxcontent.htm

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

jscheuer1
08-14-2012, 12:18 AM
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:



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

Should be:


$(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).

<!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.

molendijk
08-14-2012, 10:35 PM
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.
Just to avoid any misunderstanding: there will be no (visible) iframes on your page, they are just a means to dynamically bring external content to yours divs.
Good luck,
Arie.

gib65
08-21-2012, 02:17 AM
Well, I finally got the website up onto my server. The URL is http://www.shahspace.com/nuts_and_bolts/home.html

Try clicking on the "nuts & bolts" link. Some text should show up below the blue menu but it doesn't. This is the problem.

So if anyone is still interested in helping me, please do. Thanks.

jscheuer1
08-21-2012, 03:04 AM
There could also be other problems but you cannot do this (from the page's source code):


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" />

<script type="text/javascript" language="javascript">

The script tag can never be self closed. You need a closing script tag:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script type="text/javascript">

I also removed the language attribute from the next script tag, it's obsolete. Anyways, without that closing script tag on the first script it uses the closing script tag from the second script, thus making the entire code of the second script a comment - basically ignored.

So get rid of the self closing / slash and add the closing script tag as shown.

The browser cache may need to be cleared and/or the page refreshed to see changes.

gib65
08-22-2012, 01:14 AM
There could also be other problems but you cannot do this (from the page's source code):


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" />

<script type="text/javascript" language="javascript">

The script tag can never be self closed. You need a closing script tag:


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<script type="text/javascript">

I also removed the language attribute from the next script tag, it's obsolete. Anyways, without that closing script tag on the first script it uses the closing script tag from the second script, thus making the entire code of the second script a comment - basically ignored.

So get rid of the self closing / slash and add the closing script tag as shown.

The browser cache may need to be cleared and/or the page refreshed to see changes.

Thanks John, but unfotunately it didn't work. I made the change like you said but still no content showing up when I click on the link.

Unfortunately my server is down right now and I won't be able to get to it until the weekend, so I'll just reproduce the code here:



<html>

<head>

<title>The Nuts and Bolts of Consciousness</title>

<link rel="stylesheet" type="text/css" href="styles.css">

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js">
</script>

<script type="text/javascript">

function toggleItalic(divId)
{
var div = document.getElementById(divId);
var link = div.firstChild;

if (div.style.fontStyle == "normal")
{
div.style.fontStyle = "italic";
link.style.color = "#DDDDDD";
}
else
{
div.style.fontStyle = "normal";
link.style.color = "#FFFFFF";
}
}

function toggleDiv(divId)
{
var div = document.getElementById(divId);

div.style.display = "block";
}

function loadContent(elementSelector, sourceUrl)
{
$(elementSelector).load(sourceURL);
}

</script>

</head>

<body>

<center>

<div class="standard" style="padding-bottom: 15px;">

<div style="float: left;">
<img src="book.jpg" border=0>
</div>

<div style="float: left; text-align: left; padding-bottom: 15px; padding-left: 5px;">
<span style="font-family: plantagenet cherokee; font-size: 18pt; color: #880000;">The Nuts and Bolts of Consciousness
<br>
<span style="font-size: 12pt; padding-left: 200px;">by</span>
<span style="font-size: 14pt;">Gibran Shah</span>
</span>

<br>
<br>

<span style="font-family: plantagenet cherokee; font-size: 10pt;">
<i>“Both the philosophically minded and those that have any interest in the mind-matter relationship
will find themselves fascinated with the theory advanced in this well-conceived book.”</i><br>
-Cathy Reyes, Lawyer<br>
<br>
<i>“The most insightful and compelling ideas are generated by those following a path they are
passionate about. The Nuts and Bolts of Consciousness is the result of a relentless passion for the
search for a solution to the mind and matter problem.”</i><br>
-Darren Hamilton, Philosopher, Lawyer, Psychologist, Computer Scientist
</span>
</div>

<br>

<div class="buttons" style="text-align: right;">
<a href="http://www.google.ca">
<img src="buy_button.jpg" border=0>
</a>
</div>

<div class="buttons" style="text-align: middle;">
<a href="http://www.mm-theory.com">
<img src="sample_button.jpg" border=0>
</a>
</div>

</div>

<div style="width: 100%; background-image: url('menu_background.jpg');">

<div class="standard">

<div id="nuts_and_bolts_menu" class="menu"
onmouseover="toggleItalic('nuts_and_bolts_menu'); return false;"
onmouseout="toggleItalic('nuts_and_bolts_menu'); return false;">
<a href="javascript:loadContent('#content', 'nuts_and_bolts.html');">
Nuts & Bolts
</a>
</div>

<div id="about_the_book_menu" class="menu"
onmouseover="toggleItalic('about_the_book_menu'); return false;"
onmouseout="toggleItalic('about_the_book_menu'); return false;">
<a href="about_the_book.html">
About the Book
</a>
</div>

<div id="bits_and_bites_menu" class="menu"
onmouseover="toggleItalic('bits_and_bites_menu'); return false;"
onmouseout="toggleItalic('bits_and_bites_menu'); return false;"
onclick="toggleDiv('bits_and_bites_content'); return false;">
Bits & Bites
</div>

<div id="about_the_author_menu" class="menu"
onmouseover="toggleItalic('about_the_author_menu'); return false;"
onmouseout="toggleItalic('about_the_author_menu'); return false;">
<a href="about_the_author.html">
About the Author
</a>
</div>

<div id="buy_menu" class="menu"
onmouseover="toggleItalic('buy_menu'); return false;"
onmouseout="toggleItalic('buy_menu'); return false;">
<a href="buy.html">
Buy
</a>
</div>

<div id="contact" class="menu"
onmouseover="toggleItalic('contact'); return false;"
onmouseout="toggleItalic('contact'); return false;">
<a href="contact.html">
Contact
</a>
</div>

</div>

</div>

<div id="content" style="width: 100px; height: 100px; background-color: green;">
</div>

<!--
<div id="nuts_and_bolts_content" class="standard content" style="display: block;">
<span>
The twentieth century has provided us with a plethora of knowledge about the brain and the mind, but we have yet to fully understand the relation between the two. We are still asking the age-old question of how we—ultimately physical and biological machines—come with subjective experience and consciousness.<br>
<br>
In this book, you will find an answer to this question. It is proposed that the great difficulty of this question stems from the assumption that the mind, or consciousness, if it is to be explained at all, must be explained in terms of the brain, that the brain produces consciousness. This book presents a novel theory that rests on a complete inversion of this unquestioned assumption, and offers a fresh new look at the problem of how consciousness and the brain relate to each other.<br>
<br>
Extrapolating from the theory, one may draw the conclusion that not only does this book explain human consciousness, or the consciousness of any living organism, but that it has profound implications for the very nature of the universe and existence. These implications run the gamut from the existence of God and the afterlife to insights into science and practical applications in one’s own life. Needless to say, this book has much to offer—not only for scientists and philosophers interested in the subject of consciousness, but for anyone interested in spirituality and the human soul.<br>
</span>
</div>
-->

<div id="bits_and_bites_content" class="standard content" style="display: none;">
</div>

</center>

</body>

</html>


Also, here's nuts_and_bolts.html, the content that goes into the div--maybe there's something wrong here:



<html>

<head>
</head>

<body>
<span>
The twentieth century has provided us with a plethora of knowledge about the brain and the mind, but we have yet to fully understand the relation between the two. We are still asking the age-old question of how we—ultimately physical and biological machines—come with subjective experience and consciousness.<br>
<br>
In this book, you will find an answer to this question. It is proposed that the great difficulty of this question stems from the assumption that the mind, or consciousness, if it is to be explained at all, must be explained in terms of the brain, that the brain produces consciousness. This book presents a novel theory that rests on a complete inversion of this unquestioned assumption, and offers a fresh new look at the problem of how consciousness and the brain relate to each other.<br>
<br>
Extrapolating from the theory, one may draw the conclusion that not only does this book explain human consciousness, or the consciousness of any living organism, but that it has profound implications for the very nature of the universe and existence. These implications run the gamut from the existence of God and the afterlife to insights into science and practical applications in one’s own life. Needless to say, this book has much to offer—not only for scientists and philosophers interested in the subject of consciousness, but for anyone interested in spirituality and the human soul.<br>
</span>

</body>

</html>

jscheuer1
08-22-2012, 01:23 AM
I'll wait until the server is back up. Remind me by posting when that happens.

Thanks,

gib65
08-23-2012, 02:38 PM
Ok, the server is back up and running. My ISP changed my IP address... again!

Again, it's at http://www.shahspace.com/nuts_and_bolts/home.html

jscheuer1
08-23-2012, 03:26 PM
At least in some browsers, there's something wrong with the italic function*, but that doesn't affect the AJAX loading. This error does (near the end of the on page script):


function loadContent(elementSelector, sourceUrl)
{
$(elementSelector).load(sourceURL);
}

That first one should match the second one. I'd make it:


function loadContent(elementSelector, sourceURL)
{
$(elementSelector).load(sourceURL);
}

The browser cache may need to be cleared and/or the page refreshed to see changes.

There still could be other problems.


*To fix the italic function I would try (change highlighted):


function toggleItalic(divId)
{
var div = document.getElementById(divId);
var link = div.getElementsByTagName('a')[0];

if (div.style.fontStyle == "normal")
{
div.style.fontStyle = "italic";
link.style.color = "#DDDDDD";
}
else
{
div.style.fontStyle = "normal";
link.style.color = "#FFFFFF";
}
}

gib65
08-23-2012, 11:59 PM
Sweet! That worked! Thanks so much.