I’ve been playing around with the Jquery framework lately. I’m not a big JavaScript guy as my primary focus for the past few years now has been ActionScript/Flash/Flex. But I have to admit, Jquery (and I’m sure some of the other more robust JavaScript frameworks) is really nice.
Anyways, here’s how to load in an external html file into a div:
<script type=”text/javascript” src=”jquery-1.2.6.js”>
</script>
<script type=”text/javascript”>
$(document).ready(function(){
$(function () {
$(”#content”).load(”content.html”);
});
});
</script>
Here is the content.html file:
<html>
<head>
</head>
<body>
<h1>Here is my text file!</h1>
<p>Here is the second line of it!</p>
<p><strong>And the third!</strong></p>
</body>
</html>
Simple content management? Or is that an SEO no-no? I’m used to loading, parsing, and displaying XML via Flash. I’ll have to look into whether Jquery can do that too.
7 Comments
Easy and clean. Wouldn’t use to include any actual content that needs to be accessible and indexed by search engines but good for applications and interactive prototypes. Also ads could be inserted into the page after it has loaded to avoid troubles with slow ad-hosting services.
Hello, really great post i appreciate you work!
Strange. it doesnt work
drago – it does work. Click on the example. Unless you’re using some wacked browser….
I’ve tried to launch google.com and it not working.
$(document).ready(function(){
$(function () {
$(”#content”).load(”http://mininova.org”);
});
});
<div id="content" style="width:500px; height:200px"
Probabli i dont understand what is the porpose of this code.
Brilliant and simple!
Question: (from a non-techie, non-JQuery guy)
How to keep any HTML code which exists in the DIV,
before the jQ loads the “content.html” file ?
example:
In the demo page, the DIV has this text:
Content:
inside the DIV. See the source code…
But…after the jQ loads the “content.html” file,
the “Content: ” text is not visible anymore!
So, what should the jQ code to “append” any new HTML content
to the DIV’s already existing text?
(instead of just substituting it completely…)
Thanks!!
ray
Drago, you are violating same origin policy by loading up an external domain inside your javascript…Just search for Same Origin Policy in google.
One Trackback
[...] http://elearninglive.com/wordpress/2008/09/dynamic-loading-of-external-html-file-using-jquery/ Possibly related posts: (automatically generated)BoinxTV 1.0 released today [...]