Import html content with Javascript/Ajax

Dev Shed Forums Sponsor:

March 18th, 2009, 08:14 AM

redstar

Contributing User

Join Date: Jul 2003

Posts: 679

Time spent in forums: 2 Days 15 h 14 m 40 sec
Reputation Power: 10

Import html content with Javascript/Ajax

Hi,

I need to import a content from an url using JavaScipt or Ajax.

I need to import this:
http://example.com/menu.html

Into each page of the site. It need to be relative, because the site is on different machines. Also this need to copy the CSS/JS.

Can you please help me?

March 18th, 2009, 10:05 AM

vbrtrmn

4:04 Time Not Found

Join Date: Jan 2004

Location: Northern Virginia

Posts: 2,273

Time spent in forums: 1 Week 2 Days 22 h 10 m
Reputation Power: 337

So, you want to make a copy of some web site using javascript?!? Probably not trivial to do, I'd use wget or perl.

__________________
I am so smart, I am so smart, S.M.R.T ... I mean S.M.A.R.T.

Stop Using Pop-Ups

March 18th, 2009, 01:27 PM

janusz-jasinski

Contributing User

Join Date: Oct 2004

Location: Birmingham, UK

Posts: 722

Time spent in forums: 3 Days 20 h 7 m 31 sec
Reputation Power: 41

javascript Code:

Original - javascript Code
<script src="http://code.jquery.com/jquery-latest.js"></script> <script> var refreshId = setInterval(function() { $('#responsecontainer').load('test.asp'); }, 1000); </script>

<script src="http://code.jquery.com/jquery-latest.js"></script>
 
<script>
var refreshId = setInterval(function()
{
     $('#responsecontainer').load('test.asp');
}, 1000);
</script>

then I use

Code:

<div id="responsecontainer">
</div>

__________________

Last edited by janusz-jasinski : March 18th, 2009 at 01:30 PM.

March 18th, 2009, 02:41 PM

redstar

Contributing User

Join Date: Jul 2003

Posts: 679

Time spent in forums: 2 Days 15 h 14 m 40 sec
Reputation Power: 10

Can I use it just one time, not to refresh?

I need to copy from a page with absolute url? Can I do it?

Where do I find a list of functions of what can do Jquery on this?

Thanks.

March 19th, 2009, 12:54 AM

redstar

Contributing User

Join Date: Jul 2003

Posts: 679

Time spent in forums: 2 Days 15 h 14 m 40 sec
Reputation Power: 10

No, it don't import me anything.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"><title>Test Import Header</title>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
var refreshId = setInterval(function()
{
$('#responsecontainer').load('http://example.com/TestTemplate/Header/index.htm');
}, 1000);
</script>
</head><body>

<br>
<div id="responsecontainer">
</div>

</body></html>

March 19th, 2009, 01:24 AM

redstar

Contributing User

Join Date: Jul 2003

Posts: 679

Time spent in forums: 2 Days 15 h 14 m 40 sec
Reputation Power: 10

If I try this it works:

Code:

<html>
<head>
	<title>jQuery - Ajax dynamic content loading</title>
	<script src="jquery-latest.js" type="text/javascript"></script>
	<script type="text/javascript">
		function loadContent(id) {
			$("#contentArea").load("test.html");
		}
	</script>
</head>
<body onLoad="loadContent();">
	
	
	<div id="contentArea" style="margin: 20px 0px 10px 10px; border: 1px solid #CCC;">
		&nbsp;
	</div>
	
	

</body>
</html>

But I need to call it from another machine on the same domain.

Thank you!

March 19th, 2009, 04:51 AM

redstar

Contributing User

Join Date: Jul 2003

Posts: 679

Time spent in forums: 2 Days 15 h 14 m 40 sec
Reputation Power: 10

I also try with $.ajax

Code:

<html>
<head>
	<title>jQuery - Ajax dynamic content loading</title>
	<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
	<script type="text/javascript">
		function loadContent(id) {
			$.ajax({
				url: "http://www.google.com",
				cache: false,
				success: function(html){
				$("#contentArea").append(html);
  }
});
		}
	</script>
</head>
<body onLoad="loadContent();">
	
	
	<div id="contentArea" style="margin: 20px 0px 10px 10px; border: 1px solid #CCC; width: 780px; height: 250px; float: left;">
		&nbsp;
	</div>
	
	

</body>
</html>

December 27th, 2012, 07:19 PM

vimxts

Registered User

Join Date: Dec 2012

Posts: 1

Time spent in forums: 4 m 43 sec
Reputation Power: 0

Can't you use a simpler way?

window.onload = function(){
$('#thisHtml'sElement').load('myHTML.html');
};

The script first check if the page finished loading, then execute the function and load a external url.

Hope it works

Import html content with Javascript/Ajax

Developer Shed Advertisers and Affiliates