Results 1 to 6 of 6

Thread: AJAX Limitation

  1. #1
    Join Date
    Mar 2007
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default AJAX Limitation

    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 [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/dynamici.../seqreveal.htm
    Last edited by jscheuer1; 11-06-2014 at 07:07 AM. Reason: remove link

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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
    - John
    ________________________

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

  3. #3
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    you can also use jQuery's ajax methods, and define the dataType as "script." This executes the javascript once it's loaded. there's also a "shortcut" method - $.getScript()

  4. #4
    Join Date
    Jan 2008
    Posts
    441
    Thanks
    67
    Thanked 4 Times in 4 Posts

    Default

    can jQuery.getScript() act as a listener so that when you load a external html file then it fires off a function after it has been loaded?

  5. #5
    Join Date
    Apr 2008
    Location
    So.Cal
    Posts
    3,643
    Thanks
    63
    Thanked 516 Times in 502 Posts
    Blog Entries
    5

    Default

    you would have to attach it to some event, for example, a click; or use it as a callback when you load the other content.
    HTML Code:
    <div id="loadhere"></div>
    <script>
    $("#loadhere").load('externalpage.html', function(){ $.getScript('externalscript.js'); });
    </script>

  6. #6
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,865
    Thanks
    49
    Thanked 260 Times in 252 Posts
    Blog Entries
    56

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
  •