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.
greeny_1984 14 Posting Whiz
GuyInOz 0 Newbie Poster
I'm not sure what a div tag is. Do you a div layer?
langsor
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
greeny_1984 14 Posting Whiz
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
langsor
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.
greeny_1984 14 Posting Whiz
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
langsor
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. :-)
UzuNarU 0 Light Poster
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
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
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.
Ezzaral 2,714 Posting Sage Team Colleague Featured Poster
>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.
UzuNarU 0 Light Poster
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
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
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
Try this:
<div id="one">
<object id="foo" name="foo" type="text/html" data="aboutus.html"></object>
</div>
goldentuna 0 Newbie Poster
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!!
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.