#1
  1. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jul 2003
    Posts
    679
    Rep Power
    12

    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?
  2. #2
  3. 4:04 Time Not Found
    Devshed Regular (2000 - 2499 posts)

    Join Date
    Jan 2004
    Location
    Northern Virginia
    Posts
    2,273
    Rep Power
    338
    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
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Oct 2004
    Location
    Birmingham, UK
    Posts
    722
    Rep Power
    43
    javascript Code:
    <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 02:30 PM.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jul 2003
    Posts
    679
    Rep Power
    12
    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.
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jul 2003
    Posts
    679
    Rep Power
    12
    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>
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jul 2003
    Posts
    679
    Rep Power
    12
    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!
  12. #7
  13. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jul 2003
    Posts
    679
    Rep Power
    12
    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>
  14. #8
  15. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Dec 2012
    Posts
    1
    Rep 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

IMN logo majestic logo threadwatch logo seochat tools logo