473,327 Members | 2,094 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,327 software developers and data experts.

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 2263
Dormilich
8,658 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

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

Similar topics

4
by: Fergus O'Shea | last post by:
I have some text that appears in a Database. This text includes HTML(e.g. <br> tags). I also have a Webpage that makes an XML call to that database. But when the text is displayed on the page,...
2
by: sneill | last post by:
MXLogic, a Denver, Colorado based software company with 100+ employees is looking for candidates with **VERY STRONG** AJAX, Javascript, HTML, and CSS skills. Our company is building...
2
by: christopher.secord | last post by:
I would like have a little "loading..." tab not unlike the one that gmail uses and I would like to display that tab while an ajax call is made. The javascript to display the tab works. The...
1
by: Stefan Mueller | last post by:
I'd like to read and modify a cell (e.g. 'Text 1') in the following HTML table with a JavaScript: ============================================== <html> <body> <table id = "MyTable"> <tr id...
2
by: sgmaat | last post by:
I have create a AJAX webpage where if you press a link content is loaded into a div. NOw when this content is loaded no javascript is processed (i.e <Script>alert(..);</script>), but if the...
1
by: gkellymail | last post by:
I have a small javascript/html code below that demonstrates that problem I'm having in a larger program. I've tried all kinds of things to get it to work, but it just won't do what I want. I've...
1
by: drchaos | last post by:
Placing HTML code with inline javascript into a div both as rendered HTML(the intended final purpose) and shown as RAW text HTML (for the user to copy and paste into their own webpage.) Here is...
1
by: Pradip Caulagi | last post by:
Hello! I have the following scenario. When the html page is loaded, it creates an XMLSocket and sends some data over the socket to the server. The server in return sends some xml back. Then...
0
by: baburk | last post by:
Hi, Because of having ajax ScriptManager EnablePartialRendering = "true" the java script doesn't call public void FocusControl(Control ctrl) { System.Text.StringBuilder sb...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.