469,915 Members | 2,697 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,915 developers. It's quick & easy.

Why does AJAX div loads html, but doesn't call javascript from the other html?

Hi, I've spent so long trying to get this to work.

First I used this tutorial: http://webdesign.torn.be/tutorials/j.../page-loading/

For some reason, it doesn't work for me:

Here's my layout.


index.html
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5.     <title>The Venue - New Student building</title>
  6.  
  7.  
  8. <link rel="stylesheet" href="css/lightwindow.css" type="text/css" media="screen" />   
  9.  
  10.     <script type="text/javascript" src="miniTab.js"></script>
  11.     <link href="css2.css" rel="stylesheet" type="text/css" />
  12.     <script type="text/javascript" src="prototype.js"></script>
  13.     <script type="text/javascript">
  14.  
  15.     // <![CDATA[
  16.    document.observe('dom:loaded', function () {
  17.         var newsCat = document.getElementsByClassName('newsCat');
  18.         for (var i = 0; i < newsCat.length; i++) {
  19.             $(newsCat[i].id).onclick = function () {
  20.                 getCatPage(this.id);
  21.             }
  22.         }
  23.     });
  24.  
  25.     function getCatPage(id) {
  26.         var url = 'load-content4.php';
  27.         var rand   = Math.random(9999);
  28.         var pars   = 'id=' + id + '&rand=' + rand;
  29.         var myAjax = new Ajax.Request( url, {method: 'get', parameters: pars, onLoading: showLoad, onComplete: showResponse} );
  30.     }
  31.  
  32.     function showLoad () {
  33.         $('newsContent').style.display = 'none';
  34.         $('newsLoading').style.display = 'block';
  35.     }
  36.  
  37.     function showResponse (originalRequest) {
  38.         var newData = originalRequest.responseText;
  39.         $('newsLoading').style.display = 'none';
  40.         $('newsContent').style.display = 'block';        
  41.         $('newsContent').innerHTML = newData;
  42.     }
  43.     // ]]>
  44.     </script>
  45.                 //////////////blablablablbaalblabalbalblablablabla
  46.  
  47. </head>
  48.  
  49. <body>
  50.  
  51.  
  52. <div id="newsContainer" style="background-image: url(images/menuGradient.png); background-repeat:repeat-x; width:100%;" align="center"> 
  53.  
  54.  
  55. <table width="980" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#1B1B1B">
  56.  
  57. <tr><td width="960" align="center" background="http://bytes.com/images/menuGradient.png" >
  58.  
  59.  
  60.     <div id="newsCategoriesContainer">
  61. <ul id="miniflex" >
  62.     <span>
  63.           <li><div class="newsCat" id="tabHome"><a class="active" title="">Home</a></div></li>
  64.         <li><div class="newsCat" id="tabInformation"><a title="">Information</a></div></li>
  65.           <li><div class="newsCat" id="tabGallery"><a>Gallery</a></div></li>
  66.         <li><a href="/archives/" title="">Blog</a></li>
  67.           <li><a href="/the-language-in-the-lab/" title="">About us</a></li>
  68.           <li><a href="/demo/animated-minitabs/" title="">Sitemap</a></li>
  69.           <li><a href="/contact/" title="">Contact us</a></li>
  70.     </span>
  71. </ul></div>
  72.  
  73.  
  74. //////////////////blablablablalblabllablablabllablbllbalblablablablablabal
  75.  
  76.       <tr><td width="960" valign="top" align="left">
  77.     <div style="width: 960px; position: relative;">
  78.  
  79.         <div id="newsLoading" align="center"><img src="loading_indicator.gif" title="Loading..." alt="Loading..." border="0" vspace="100" /></div>
  80.  
  81.     <div>
  82.         <div id="newsContent"></div>
  83.     </div>
  84.     </div>
  85.  </td></tr>
  86.     </table>
  87. </div>
  88. </body>
  89. </html>
loadcontent4.php
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5.  
  6.  
  7. </head>
  8. <body>
  9. <?php
  10. function stringForJavascript($in_string) {
  11.    $str = ereg_replace("[\r\n]", " \\n\\\n", $in_string);
  12.    $str = ereg_replace('"', '\\"', $str);
  13.    return $str;
  14. }
  15. switch($_GET['id']) {
  16.     case 'tabHome':
  17.         include('Home.html');
  18.         break;
  19.     case 'tabInformation':
  20.         include('deleteme_frameContent1.html');
  21.         break;
  22.     case 'tabGallery':
  23.         include('Gallery.html');
  24.         break;
  25.     default:
  26.         $content = 'There was an error.';
  27.  
  28. print stringForJavascript($content);
  29. usleep(600000);
  30. ?>
  31.  
  32. </body>
  33.  
  34. </html>
  35.  
Gallery.html
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Gallery</title>
  6.  
  7. <script type="text/javascript" src="javascript/prototype.js"></script>
  8. <script type="text/javascript" src="javascript/scriptaculous.js?load=effects"></script>
  9. <script type="text/javascript" src="javascript/lightwindow.js"></script>
  10. <link rel="stylesheet" href="css/lightwindow.css" type="text/css" media="screen" />   
  11.  
  12.  
  13. </head>
  14.  
  15. <body>
  16.  
  17. <a href="http://bytes.com/images/other/futureSu/side1.jpg" class="lightwindow hidden" rel="SU[Future] title="my caption"><img src="http://bytes.com/images/other/futureSu/side1.jpg" height="100" width="100" /></a>
  18.  
  19. <a href="http://bytes.com/images/other/futureSu/side2.jpg" class="lightwindow hidden" rel="SU[Future] title="my caption"><img src="http://bytes.com/images/other/futureSu/side2.jpg" height="100" width="100" /></a>
  20.  
  21. <a href="http://bytes.com/images/other/futureSu/final.jpg" onFocus="if(this.blur)this.blur()" class="lightwindow hidden" rel="SU[Future] title="my caption"><img src="http://bytes.com/images/other/futureSu/final.jpg" height="100" width="100" /></a>
  22.  
  23. <a href="flash/SnowDrivingFail.mov" class="lightwindow" params="lightwindow_width=340,lightwindow_height=260" title="vid">mp4 vid</a>
  24.  
  25. </body>
  26. </html>
  27.  
Javascript folder contains:
effects.js, lightwindow.js, prototype.js, scriptaculous.js

Ok, if I copy all the gallery.html code into my main index page it all works, also if I run Gallery.html it self it the javascript also works... Thus providing it's not an error with gallery.html
Images, etc all BODY content displays correctly (just not the javascript).

But the error is within the DIV containing the changeable content. And not loading the javascript from other pages.

Please Help someone to get my main page to run the external javascript?

p.s. i uploaded my site, hoping to make it easier for you guys:

index2.html (click Gallery at top, and choose image):
http://mediaproject-su.netne.net/index2.html

Gallery.html (to prove the JS works):
http://mediaproject-su.netne.net/Gallery.html
Jan 31 '11 #1
4 1988
Dormilich
8,652 Expert Mod 8TB
as far as I can see there is no event handler attached to the images. Iím not sure whether the multiple inclusion of the JS files playes a role there Ö

PS. you can be glad youíre not using XHTML Ö
Jan 31 '11 #2
Whoops, I just edited that part out. I forgot to remove it when posting here. Problem still remains..

How do I attach an event handler attached to the images (I thought the class="lightwindow hidden" would do that)
Jan 31 '11 #3
Anyone?

I tried moving the scripts around in the Gallery.html .. so putting it in BODY instead of HEAD, same problem.. :/
Jan 31 '11 #4
:( still stuck, tried everything.. is there any other way I could have a music player continuosly playing even when they change pages without using framed < because frames are lame, and i tried them before, caused to many problem
Feb 2 '11 #5

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

4 posts views Thread by Fergus O'Shea | last post: by
2 posts views Thread by christopher.secord | last post: by
2 posts views Thread by sgmaat | last post: by
1 post views Thread by Pradip Caulagi | last post: by
1 post views Thread by Waqarahmed | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.