Page 3 of 3 FirstFirst 123
Results 21 to 22 of 22

Thread: Load external page into <DIV>

  1. #21
    Join Date
    Sep 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by codeexploiter View Post
    That was a critical information that you've missed to furnish in your posting. If the page you are trying to load in another page is in your domain then we can go for AJAX. But personally I feel that if you can use a solution based on Server-side like SSI (server-side includes), PHP, etc.

    Please find an AJAX based solution below which includes a HTML page file content in a div element in another page.

    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    	<title>An XHTML 1.0 Strict standard template</title>
    	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    	<meta http-equiv="Content-Style-Type" content="text/css" />
    	<style type="text/css">
    
    	</style>
    	<script type="text/javascript">
    	function ajaxFunction(id, url){
    		var xmlHttp;
    		try {// Firefox, Opera 8.0+, Safari
    			xmlHttp = new XMLHttpRequest();		
    		} catch (e) {// Internet Explorer
    			try {
    				xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
    			} catch (e) {
    				try {
    					xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    				} catch (e) {
    					alert("Your browser does not support AJAX!");
    					return false;
    				}
    			}
    		}
    		
    		xmlHttp.onreadystatechange = function(){
    			if (xmlHttp.readyState == 4) {
    				//Get the response from the server and extract the section that comes in the body section of the second html page avoid inserting the header part of the second page in your first page's element
    				var respText = xmlHttp.responseText.split('<body>');
    				elem.innerHTML = respText[1].split('</body>')[0];
    			}
    		}
    
    		var elem = document.getElementById(id);
    		if (!elem) {
    			alert('The element with the passed ID doesn\'t exists in your page');
    			return;
    		}
    	
    		xmlHttp.open("GET", url, true);
    		xmlHttp.send(null);
    	}		
    </script>
    </head>
    
    <body>
    	<div id="test"></div>
    	<form>
    		<input type="button" value="Make Ajax Call" id="ajax" onclick="ajaxFunction('test','one.htm');"/>
    	</form>
    </body>
    </html>
    You can use the code in your case but with your element ID and page name.

    Note that in this demo page my assumption is that you just want to load some HTML page content. Thats why I've extracted only those items that falls within its body section. If the body section needs any script file inclusion then you have to change the extraction section according to your needs.

    Hope this help
    Hi,

    Your code work very well for me but my script doesn't work anymore... i need help!

    Thanks

  2. #22
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,005
    Thanks
    44
    Thanked 3,203 Times in 3,165 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by dominicdesign View Post
    Hi,

    Your code work very well for me but my script doesn't work anymore... i need help!

    Thanks
    This is an old thread, and that question is rather vague. And I'm not sure if codeexploiter is still around or not.

    So I'm closing this thread.

    Feel free to start a new thread, you can even link back to this one if you like. But please include a link to your page so we can check it out, and explain what your code did before that it is no longer doing.

    If you want more help, please include a link to the page on your site that contains the problematic code so we can check it out.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •