Kovo
03-14-2007, 04:27 PM
I found an annoying limitation when loading external files into the current document with AJAX.
When I use the
<script type="text/javascript">
ajax_loadContent('divid','home.html');
</script>
script, it will load the page fine, the sole issue is that this page does not inherit any script that has been preloaded on the main page.
Let me be more precise:
This is the code to a site that uses the loadcontent command to load its pages:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="robots" content="index, follow">
<meta name="description" content="The Kovo Network, Serving the Informative!! Kovo, or Kevork Aghazarian's (Kovo) personal online portfolio. See select works of a graphic/web designer from Montreal, Quebec, Canada.">
<meta name="keywords" content="The, Kovo, Network, Serving, the, Informative, KovoKevork's, Portfolio, Aghazarian, Montreal, Quebec, Canada, Web, Graphic, Designer, kovo, website, kovos, kovo's, web, space, bio, biography, my, room, pet, atf, music, sound, beat, beats, drum, bass, techno, dance, experiment, the, experimental, ambient, good">
<meta name="GOOGLEBOT" content="INDEX, FOLLOW">
<meta name="revisit-after" content="7 days">
<meta http-equiv="imagetoolbar" content="no">
<title>The Kovo Network - Serving The Informative - Kovo Kovo Kovo!</title>
<script type="text/javascript" src="date.js"></script>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="modal-message.css"/>
<link rel="stylesheet" type="text/css" href="lightbox.css"/>
<style type="text/css">
@import 'css.css';
</style>
<!--[if lte IE 6]><style type="text/css">#text {line-height: 1.2; border: transparent solid 0px;} #main {margin-top: -23px; border: transparent solid 0px;} #copy {margin-top: -40px;} #botnav {top: 158px;}</style><![endif]-->
<!--[if IE 7]><style type="text/css">#text {line-height: 1.2;} #main {margin-top: -23px;} #copy {margin-top: -40px;} #botnav {top: 158px;}</style><![endif]-->
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript" src="ajax-dynamic-content.js"></script>
<script type="text/javascript" src="modal-message.js"></script>
<script type="text/javascript" src="lightbox.js"></script>
</head>
<body>
<table border="0">
<tr>
<td>
<div id="container">
<div id="topnav">
<a href="#" onclick="ajax_loadContent('ajax','home.html');return false">Home</a> <a href="#" onclick="ajax_loadContent('ajax','sites.html');return false">Sites</a> <a href="#" onclick="ajax_loadContent('ajax','aff.html');return false">Affiliates</a> <a href="#" onclick="ajax_loadContent('ajax','linkto2.html');return false">Submit</a>
</div>
<div id="main">
<div id="text">
<div id="ajax"></div>
</div>
</div>
<div id="botnav">
<a href="#" onclick="displayMessage('linkto.html');return false">Guidelines for Website Submission</a>
</div>
<div id="copy">
Copyright©<script>document.write(+ year);</script> The Kovo Network, All Rights Reserved. Designed by <a href="http://www.kevmedia.ca">Kevmedia</a>.
</div>
</div>
</td>
</tr>
</table>
<script type="text/javascript">
ajax_loadContent('ajax','home.html');
</script>
<script type="text/javascript">
messageObj = new DHTML_modalMessage();
messageObj.setShadowOffset(5);
function displayMessage(url)
{
messageObj.setSource(url);
messageObj.setCssClassMessageBox(false);
messageObj.setSize(500,465);
messageObj.setShadowDivVisible(true);
messageObj.display();
}
function displayStaticMessage(messageContent,cssClass)
{
messageObj.setHtmlContent(messageContent);
messageObj.setSize(300,150);
messageObj.setCssClassMessageBox(cssClass);
messageObj.setSource(false);
messageObj.setShadowDivVisible(false);
messageObj.display();
}
function closeMessage()
{
messageObj.close();
}
</script>
</body>
</html>
The link to the site is [Removed]
Now If i want to,say, use lightbox on one of the pages, (click Sites link for example) the lightbox script no longer deals with the post-loaded page. So any reference to the script in the externally loaded page is void.
At first, the obvious solution is to put the script on the external file itself, but no go, seeing as when ajax loads the content into the page, any script on it is not executed and is avoided.
Someone on another forum came up with this simple solution:
<script type="text/javascript">
initLightbox();
</script>
placed on the loaded file, it now works.
So I was wondering if there are any other workarounds, or is this the only way?
Because the work around wont work for all scripts... like
http://www.dynamicdrive.com/dynamicindex17/seqreveal.htm
When I use the
<script type="text/javascript">
ajax_loadContent('divid','home.html');
</script>
script, it will load the page fine, the sole issue is that this page does not inherit any script that has been preloaded on the main page.
Let me be more precise:
This is the code to a site that uses the loadcontent command to load its pages:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="robots" content="index, follow">
<meta name="description" content="The Kovo Network, Serving the Informative!! Kovo, or Kevork Aghazarian's (Kovo) personal online portfolio. See select works of a graphic/web designer from Montreal, Quebec, Canada.">
<meta name="keywords" content="The, Kovo, Network, Serving, the, Informative, KovoKevork's, Portfolio, Aghazarian, Montreal, Quebec, Canada, Web, Graphic, Designer, kovo, website, kovos, kovo's, web, space, bio, biography, my, room, pet, atf, music, sound, beat, beats, drum, bass, techno, dance, experiment, the, experimental, ambient, good">
<meta name="GOOGLEBOT" content="INDEX, FOLLOW">
<meta name="revisit-after" content="7 days">
<meta http-equiv="imagetoolbar" content="no">
<title>The Kovo Network - Serving The Informative - Kovo Kovo Kovo!</title>
<script type="text/javascript" src="date.js"></script>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="modal-message.css"/>
<link rel="stylesheet" type="text/css" href="lightbox.css"/>
<style type="text/css">
@import 'css.css';
</style>
<!--[if lte IE 6]><style type="text/css">#text {line-height: 1.2; border: transparent solid 0px;} #main {margin-top: -23px; border: transparent solid 0px;} #copy {margin-top: -40px;} #botnav {top: 158px;}</style><![endif]-->
<!--[if IE 7]><style type="text/css">#text {line-height: 1.2;} #main {margin-top: -23px;} #copy {margin-top: -40px;} #botnav {top: 158px;}</style><![endif]-->
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript" src="ajax-dynamic-content.js"></script>
<script type="text/javascript" src="modal-message.js"></script>
<script type="text/javascript" src="lightbox.js"></script>
</head>
<body>
<table border="0">
<tr>
<td>
<div id="container">
<div id="topnav">
<a href="#" onclick="ajax_loadContent('ajax','home.html');return false">Home</a> <a href="#" onclick="ajax_loadContent('ajax','sites.html');return false">Sites</a> <a href="#" onclick="ajax_loadContent('ajax','aff.html');return false">Affiliates</a> <a href="#" onclick="ajax_loadContent('ajax','linkto2.html');return false">Submit</a>
</div>
<div id="main">
<div id="text">
<div id="ajax"></div>
</div>
</div>
<div id="botnav">
<a href="#" onclick="displayMessage('linkto.html');return false">Guidelines for Website Submission</a>
</div>
<div id="copy">
Copyright©<script>document.write(+ year);</script> The Kovo Network, All Rights Reserved. Designed by <a href="http://www.kevmedia.ca">Kevmedia</a>.
</div>
</div>
</td>
</tr>
</table>
<script type="text/javascript">
ajax_loadContent('ajax','home.html');
</script>
<script type="text/javascript">
messageObj = new DHTML_modalMessage();
messageObj.setShadowOffset(5);
function displayMessage(url)
{
messageObj.setSource(url);
messageObj.setCssClassMessageBox(false);
messageObj.setSize(500,465);
messageObj.setShadowDivVisible(true);
messageObj.display();
}
function displayStaticMessage(messageContent,cssClass)
{
messageObj.setHtmlContent(messageContent);
messageObj.setSize(300,150);
messageObj.setCssClassMessageBox(cssClass);
messageObj.setSource(false);
messageObj.setShadowDivVisible(false);
messageObj.display();
}
function closeMessage()
{
messageObj.close();
}
</script>
</body>
</html>
The link to the site is [Removed]
Now If i want to,say, use lightbox on one of the pages, (click Sites link for example) the lightbox script no longer deals with the post-loaded page. So any reference to the script in the externally loaded page is void.
At first, the obvious solution is to put the script on the external file itself, but no go, seeing as when ajax loads the content into the page, any script on it is not executed and is avoided.
Someone on another forum came up with this simple solution:
<script type="text/javascript">
initLightbox();
</script>
placed on the loaded file, it now works.
So I was wondering if there are any other workarounds, or is this the only way?
Because the work around wont work for all scripts... like
http://www.dynamicdrive.com/dynamicindex17/seqreveal.htm