AJAX Limitation

Kovo · #1 03-14-2007, 05: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:

Code:

<!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">
        					&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" onclick="ajax_loadContent('ajax','home.html');return false">Home</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" onclick="ajax_loadContent('ajax','sites.html');return false">Sites</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" onclick="ajax_loadContent('ajax','aff.html');return false">Affiliates</a>&nbsp;&nbsp;&nbsp;&nbsp;<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">
      							&nbsp;&nbsp;<a href="#" onclick="displayMessage('linkto.html');return false">Guidelines for Website Submission</a>
      						</div>
      					<div id="copy">

      						Copyright&copy;<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 http://www.thekovonetwork.net

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/dynamici.../seqreveal.htm

jscheuer1 · #2 03-14-2007, 07:34 PM

Basically what you need to do (assuming the required script(s) and style are available to the new content) is initialize any scripts that otherwise would have been initialized onload because with Ajax loaded content, the onload event has already fired.

This can get tricky when the new content takes awhile to load. Some strategies for doing so are here:

http://www.dynamicdrive.com/forums/s...ad.php?t=17426

and here:

http://www.dynamicdrive.com/forums/s...ad.php?t=13003

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search