2011-02-01 68 views
0

我花了這麼長時間試圖通過ajax獲得這個多頁面的工作。爲什麼AJAX div加載html,但不會從其他html調用javascript?

首先,我用這個教程:http://webdesign.torn.be/tutorials/javascript/prototype/page-loading/

出於某種原因,javascript調用不爲我工作:

這裏是我的佈局。

的index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD 
XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html 
xmlns="http://www.w3.org/1999/xhtml"> 
<head> 

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>The Venue - New Student building</title> 


<link rel="stylesheet" href="css/lightwindow.css" type="text/css" media="screen" /> 

<script type="text/javascript" src="miniTab.js"></script> 
<link href="css2.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="prototype.js"></script> 
<script type="text/javascript"> 

// <![CDATA[ 
       document.observe('dom:loaded', function() { 
    var newsCat = document.getElementsByClassName('newsCat'); 
    for (var i = 0; i < newsCat.length; i++) { 
    $(newsCat[i].id).onclick = function() { 
    getCatPage(this.id); 
    } 
    } 
}); 

function getCatPage(id) { 
    var url = 'load-content4.php'; 
    var rand = Math.random(9999); 
    var pars = 'id=' + id + '&rand=' + rand; 
    var myAjax = new Ajax.Request(url, {method: 'get', parameters: pars, onLoading: showLoad, onComplete: showResponse}); 
} 

function showLoad() { 
    $('newsContent').style.display = 'none'; 
    $('newsLoading').style.display = 'block'; 
} 

function showResponse (originalRequest) { 
    var newData = originalRequest.responseText; 
    $('newsLoading').style.display = 'none'; 
    $('newsContent').style.display = 'block'; 
    $('newsContent').innerHTML = newData; 
} 
// ]]> 
</script> 
     <!-- blablablablbaalblabalbalblablablabla other stuff --> 

</head> 

<body> 



<div id="newsContainer" style="background-image: url(images/menuGradient.png); background-repeat:repeat-x; width:100%;" align="center"> 

<table width="980" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#1B1B1B"> 

<tr><td width="960" align="center" background="http://bytes.com/images/menuGradient.png" > 


    <div id="newsCategoriesContainer"> 
<ul id="miniflex" > 
<span> 
    <li><div class="newsCat" id="tabHome"><a class="active" title="">Home</a></div></li> 
     <li><div class="newsCat" id="tabInformation"><a title="">Information</a></div></li> 
    <li><div class="newsCat" id="tabGallery"><a>Gallery</a></div></li> 
     <li><a href="/archives/" title="">Blog</a></li> 
    <li><a href="/the-language-in-the-lab/" title="">About us</a></li> 
    <li><a href="/demo/animated-minitabs/" title="">Sitemap</a></li> 
    <li><a href="/contact/" title="">Contact us</a></li> 
</span> 
</ul></div> 


1111111111111111111 blablablabla 

     <tr><td width="960" valign="top" align="left"> 
    <div style="width: 960px; position: relative;"> 

    <div id="newsLoading" align="center"><img src="loading_indicator.gif" title="Loading..." alt="Loading..." border="0" vspace="100" /></div> 

    <div> 
     <div id="newsContent"></div> 
    </div> 
    </div> 
</td></tr> 
    </table> 
</div> 
</body> 
</html> 

loadcontent4.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 


</head> 
<body> 
<?php 
function stringForJavascript($in_string) { 
    $str = ereg_replace("[\r\n]", " \\n\\\n", $in_string); 
    $str = ereg_replace('"', '\\"', $str); 
    return $str; 
} 
switch($_GET['id']) { 
case 'tabHome': 
    include('Home.html'); 
    break; 
case 'tabInformation': 
    include('deleteme_frameContent1.html'); 
    break; 
case 'tabGallery': 
    include('Gallery.html'); 
    break; 
default: 
    $content = 'There was an error.'; 

} 
print stringForJavascript($content); 
usleep(600000); 
?> 

</body> 

</html> 

Gallery.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Gallery</title> 

<script type="text/javascript" src="javascript/prototype.js"></script> 
<script type="text/javascript" src="javascript/scriptaculous.js?load=effects"></script> 
<script type="text/javascript" src="javascript/lightwindow.js"></script> 
<link rel="stylesheet" href="css/lightwindow.css" type="text/css" media="screen" /> 


</head> 

<body> 

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

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

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

<a href="flash/SnowDrivingFail.mov" class="lightwindow" params="lightwindow_width=340,lightwindow_height=260" title="vid">mp4 vid</a> 

</body> 
</html> 

的Javascript倍呃包含: effects.js,lightwindow.js,prototype.js,scriptaculous.js

好吧,如果我將所有gallery.html代碼複製到我的主索引頁,它的一切工作,如果我運行Gallery.html通過它自我,JavaScript也有效...因此,它提供它不是一個錯誤gallery.html 圖像等所有BODY內容顯示從index.html(只是不是JavaScript)調用時正確(我甚至嘗試移動腳本成的index.html,我試圖從報頭移動腳本體,但它們都沒有工作)

但錯誤是包含可變的內容DIV內。而不是從其他頁面加載JavaScript。

請幫助別人讓我的主網頁運行外部JavaScript?

p.s.我上傳了我的網站,希望能讓你們更輕鬆: ps.s.s.我認爲這個錯誤是由於index.html上的img-links沒有看到外部腳本;沒有事件處理程序附加到圖像。 (但我該怎麼做,幫我個人:()

index2.html(單擊頂部的圖庫,並選擇圖像(請參閱錯誤,頁面被重定向,而不是來自其他html的javascript調用):mediaproject-su.netne .NET/index2.html

Gallery.html(證明JS直接工作,在這裏工作正常):mediaproject-su.netne.net/Gallery.html

回答

0

你AJAXing到您的文檔的頁面不進入另一幀所以它不會需要尋找到「.parent」對任何文件的引用的腳本。也就是說,除非,你真的AJAXing到iframe中,那麼這是一個不同的故事。

+0

林AJAXing到一個div ..嗯,我不想使用框架,因爲我他們遇到了麻煩,我實際上嘗試使用框架來分割標題/內容以防止標題刷新,但我無法修復所有這些滾動條問題,主要問題是沒有MASTER SCROLLBAR來控制它們,只有單個滾動條。 \ n我還有什麼可以參考腳本的。\ n還有什麼其他的方式可以讓我達到這個效果。 javascript:標題/內容(僅限內容刷新,因爲標題後面包含聲音,每次有人更改頁面時我不想刷新) – astral 2011-02-01 11:26:44

0

您的圖庫頁面將有一個事件來檢查頁面加載時的功能,以使您的圖庫功能正常工作。即使AJAX返回的JavaScript,然後你會需要調用所改變的DOM任何設置功能,一旦它已成功地插入到您的div