how to load a page in a div tag

Question

greeny_1984 14 Posting Whiz

15 Years Ago

hi,
i have a asp page in which iam using iframe to load a aspx page,but it is taking long time to load a page,so we r using div tag to load a page.is this possible to load a page using div.whats the javascript to load a page using div tag.
waiting for replies.

javascript

9 Contributors
15 Replies
14K Views
4 Years Discussion Span
Latest Post 11 Years Ago Latest Post by goldentuna

All 15 Replies

langsor

15 Years Ago

Is this an ASP question or a JavaScript question, because I don't know squat about ASP.

Is your question how to load content into an html <div> tag using javascript? Are you getting that content from a server-side script or somewhere else?

Please be more specific about this ... thanks ... I'm just not quite clear on the question.

<html>
<head>
<script type="text/javascript">
function load_content ( id, content ) {
  var node = document.getElementById( id );
  node.innerHTML = content;
}
</script>
</head>
<body>
  <a href="javascript:" onclick="load_content('test','some content')">load content</a>
  <div id="test"></div>
</body>
</html>

There's really lots of different ways to do this, this is just one example.

Cheers

langsor

15 Years Ago

iam talking abt javascript only, i have html tag div,i want to load a page in to that div tag,is there a way to load a page using div tag

javascript can load content into a div tag, but that content has to come from somewhere and javascript cannot open a file (page) on its own. So you would need to send the page information to javascript and have it load that page information.

How do you propose getting the page-content-information to javascript?
Ajax?
Preloaded when you load the main-page?

Have you considered using an iframe <iframe> element and having javascript load the page into the iframe? This is pretty easy and might be what you're looking for.

langsor

15 Years Ago

I would be surprised if using a <div> instead of an <iframe> reduces your load time, but you are free to explore this possibility...

I'm a PHP programmer, so I will use that as my server-side script example (sorry) and show one way to load that page into a <div> tag with JavaScript. But remember, if this page has full <html><head>...</head><body>...</body></html> type tags, this will be incredibly mangled and ugly results.

my_page.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
</body>
<p>Some 'mixed' paragraph "type" content ... goes here //\\</p>
</html>

example.php

<?php
$page = file_get_contents('my_page.html');
// must sanitize the content for javascript variable
$page = addslashes( $page );
$page = str_replace( "\r", "", $page );
$page = str_replace( "\n", "", $page );
?>
<html>
<head>
<script type="text/javascript">
var page = '<? print $page ?>';
window.onload = function () {
  var div = document.getElementById('my_div');
  div.innerHTML = page;
}
</script>
</head>
<body>
  <div id="my_div"></div>
</body>
</html>

Of course you could also just do this with PHP

<html>
</head>
</head>
<body>
  <div><? print file_get_contents('my_page.html') ?></div>
</body>
</html>

Which makes my first example just a proof of concept and nothing more.

I could also use DOM methods, but that would require parsing the entire page and rebuilding it, and probably much more on the PHP side as well ... this is easy and it works.

If you were getting your page from an Ajax call, we would want to do this a different way, so let me know if you are and I will play with that idea some -- and probably use DOM methods. :-)

Ezzaral 2,714 Posting Sage

14 Years Ago

>Someone please let me know if i can post an external link
External links are fine if they directly address the question and do not violate the community rules.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

GuyInOz 0 Newbie Poster · Answer 1 · 2008-08-30T18:45:57+00:00

I'm not sure what a div tag is. Do you a div layer?

greeny_1984 14 Posting Whiz · Answer 2 · 2008-09-01T13:32:11+00:00

iam talking abt javascript only, i have html tag div,i want to load a page in to that div tag,is there a way to load a page using div tag

greeny_1984 14 Posting Whiz · Answer 3 · 2008-09-04T11:37:24+00:00

i have already used iframe,but it is taking long time to load,so iam looking for a alternative
which takes less time to load

UzuNarU 0 Light Poster · Answer 4 · 2009-06-20T22:12:41+00:00

Hi I realize this thread is kind of old, but hopefully someone will be able to help me.

I am currently working on a photo portfolio site for a client, however I am trying to do it with AJAX and as I am still very new to AJAX. I am in need of some help, and my usual source doesn't know AJAX yet. :(

Ok what I am trying to do:

I have a image menu which expands the images when you roll over them (javascript using mootools) I want to make it so when the link in the menu is clicked it load in a html div below the image menu. Also I would liek to do it so that only the div updates and the whole page doesn't refresh, if it is possible. Also i am using php.

Thanks
UzuNarU Web Designs - Endless Possibilities

miesnerd 0 Newbie Poster · Answer 5 · 2009-06-21T22:58:30+00:00

Hi.
I've been asked to do a project, and I've been out of the web development game for about a decade.
Since then, I've only occasionally been editing files, content, etc. and not really desigining websites.

Anyways, back when I was doing this, frames were the shiz and the fact that I could do that blew people's socks off.
Now, CSS is king, and so I need to load a website into a div.
Iframes wont work because it looks like crap when i've tried to use it.

Moving on, the website is healthytnteens.net.
The particular page im working on is index108.html.
What I'd like is to click on the pulldown menu "teen topics", and click on the second option "tobacco use" it to load "tobaccouse.html" (or whatever) into that main div called "featured_marketplace2". (Cut me some slack, i got a template and didnt rename the divs). Anyways, I know the javascript is working because it performs a function, but the WRONG function. It takes me back to "healthytnteens.net".
How do I change the below code to get it to load "tobacco.html" or whatever within that main div?

Here's the javascript:

<script type="text/javascript">
function load_content ( id, content ) {
  var node = document.getElementById( id );
  node.innerHTML = content;
}
</script>

and here's the html:

<li><a href="http://www.healthytnteens.net" onclick="load_content('featured_marketplace2','tobaccouse.html')">Tobacco Use</a>
  <div id="featured_marketplace2"></li>

Thanks

Miesnerd

UzuNarU 0 Light Poster · Answer 6 · 2009-06-23T20:58:40+00:00

hello everybody, I think I have found the solution for the loading content into a div, how ever this *only* pulls data from another file and adds it to a div on the current page by use of javascript.

Someone please let me know if i can post an external link, as the solution is much to big to post here, it would be like 5 pages long.

UzuNarU 0 Light Poster · Answer 7 · 2009-06-24T07:32:04+00:00

Ok well I found a solution at: http://phatfusion.net/pageloader/

What it does is take a HTML DIV from and external file and place it in a HTML DIV in the current page. No page refresh just DIV refreshes.

However the URL dups in the address bar so it looks confusing, but i t might be easily fixable.

Hope this helps

ankitbhatia 0 Newbie Poster · Answer 8 · 2009-10-28T12:54:11+00:00

hello everybody, I think I have found the solution for the loading content into a div, how ever this *only* pulls data from another file and adds it to a div on the current page by use of javascript.
Someone please let me know if i can post an external link, as the solution is much to big to post here, it would be like 5 pages long.

Hi, if you have found the solution to the problem then you can post the link to the solution as it will help a lottt to others.

UzuNarU 0 Light Poster · Answer 9 · 2010-05-14T17:43:48+00:00

For the people who still look at this thread. This is a AJAX JavaScript which allows you to call an external page, query string or whatever you desire and send it to a specified DIV eg:

<a href="javascript:void()" onclick="javascript:sendRequest('sourcepage?id=34', 'targetdiv')">Link Text</a>
<div id="targetdiv">This is the target</div>

This makes it so that users of your site can see the script being passed to get the results that are displayed.

function createRequestObject() 
{
	var returnObj = false;
	
    if(window.XMLHttpRequest) {
        returnObj = new XMLHttpRequest();
    } else if(window.ActiveXObject) {
		try {
			returnObj = new ActiveXObject("Msxml2.XMLHTTP");

			} catch (e) {
			try {
			returnObj = new ActiveXObject("Microsoft.XMLHTTP");
			}
			catch (e) {}
			}
			
    }
	return returnObj;
}

var http = createRequestObject();
var target;

// This is the function to call, give it the script file you want to run and
// the div you want it to output to.
function sendRequest(scriptFile, targetElement)
{	
	target = targetElement;
	try{
	http.open('get', scriptFile, true);
	}
	catch (e){
	document.getElementById(target).innerHTML = e;
	return;
	}
	http.onreadystatechange = handleResponse;
	http.send();	
}

function handleResponse()
{	
	if(http.readyState == 4) {		
	try{
		var strResponse = http.responseText;
		document.getElementById(target).innerHTML = strResponse;
		} catch (e){
		document.getElementById(target).innerHTML = e;
		}	
	}
}

Devender.gupta 0 Newbie Poster · Answer 10 · 2011-01-15T21:24:48+00:00

Try this:

<div id="one">
<object id="foo" name="foo" type="text/html" data="aboutus.html"></object>
</div>

goldentuna 0 Newbie Poster · Answer 11 · 2012-10-10T20:19:06+00:00

I know this is real old... but UzuNarU posted the ajax solution above... and it's working great for us... with one big exception...

We sometimes have javascript code coming back using this ajax process - and it won't display.

Is there a trick do getting javascript ajax to display a javascript content.

e.g. sample code that could be return using this ajasx solution. Apparently we are 'nesting' javascript code.

<script type='text/javascript'><!--// <![CDATA[
var ox_swf = new FlashObject('http://xxxxxxxx/haas_tn468x60.swf', 'Advertisement', '468', '60', '10');
    ox_swf.addVariable('clickTARGET', '_blank');
    ox_swf.addVariable('clickTAG', 'http%3A%2F%2Fxxxxxxx%3D60698__zoneid%3D0__cb%3D655fbc6d60');

ox_swf.addParam('allowScriptAccess','always');
ox_swf.write('ox_69efb414458c63b218d5b1aeb7b05b8b');
// ]]> --></script>

Thanks to anyone who would respond!!

how to load a page in a div tag

Recommended Answers Collapse Answers

All 15 Replies

Recommended Answers