2011-01-09 17 views
0

私はウェブプログラミングでは初心者ですが、私は大学のホームページを作っていなければなりません。私はajaxを使用してdiv内の.jspページを読み込むhtmlファイルを持っています。私は別のファイルを読み込むリンクをいくつか持っています。私の問題は、リンクをクリックしたときにFirefoxが応答しないことです(エラーメッセージも表示されないアクティビティもありません)。一方、Internet Explorerでは、最初のリンク(About Me)は正常に動作します(div内の.jspをロードします)。しかし、私の2番目のリンク(写真)は、javascriptを含む.jspをロードする必要があり、どちらのブラウザでも動作しません。 IEでは、.jspがロードされますが、javascriptは動作しません。 私は本当にいくつかの助けに感謝します。ここに私のコードは次のとおりです。html ajaxがFirefoxに読み込まれない

メインページ:

<head> 
<title>Titi's HomePage</title> 
<link rel="stylesheet" type="text/css" href="homeStyle.css"/> 
<script type="text/javascript"> 
    function loadXMLDoc(file, div) 
    { 
     if(window.XMLHttpRequest) 
     { 
      xmlhttp = new XMLHttpRequest(); 
     } 
     else 
     { 
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
     xmlhttp.onreadystatechange = function() 
     { 
      if(xmlhttp.readyState == 4 && xmlhttp.status == 200) 
      { 
       document.getElementById(div).innerHTML = xmlhttp.responseText; 
      } 
     } 
     xmlhttp.open("GET", file, true); 
     xmlhttp.send(); 
    } 
</script> 
</head> 

<body class="body"> 
<div align="center"><img src="images/header2.jpg" width="1074" height="162" /></div> 
<div align="center"> 
    <table width="1075" height="41" border="1" class="mainTable"> 
    <tr> 
     <th width="215" scope="col"><a href="javascript:loadXMLDoc('http://localhost:8000/HomePage/aboutMe.jsp', 'display');">About Me</a></th> 
     <th width="227" scope="col"><a href="javascript:loadXMLDoc('http://localhost:8000/HomePage/Photos.jsp', 'display');">Photos</a></th> 
    </tr> 
    </table> 
    <table class="displayTable"> 
    <tr> 
     <td><div id="display"></td> 
    </tr> 
    </table> 
</div> 
</body> 

Photos.jsp

<head> 
<title>Photos</title> 
<SCRIPT language=JavaScript> 
theImages = new Array("images/Constanta/c1.jpg", "images/Constanta/c2.jpg", "images/Constanta/c3.jpg","images/Constanta/c4.jpg"); 
function displayImages() { 
for(x in theImages){ 
    document.write('<img SRC="' +theImages[x]+' " width=80, height =80 onmouseover=addSource(\"'+theImages[x]+'\") onmouseout =removeSource()>'); 
} 
} 
function addSource(name){ 
document.getElementById("biggie").src = name; 
var newImg = new Image(); 
newImg.src = name; 
document.getElementById("biggie").height = newImg.height; 
document.getElementById("biggie").width = newImg.width; 

} 
function removeSource(){ 
document.getElementById("biggie").src = ""; 
document.getElementById("biggie").height = 0; 
document.getElementById("biggie").width = 0; 
} 
</SCRIPT> 
</head> 

<body> 
<SCRIPT language=JavaScript> 
displayImages(); 
</SCRIPT> 
<br/> 
<center><img src="" id="biggie" width="0" height="0" align="middle"></center> 
</body> 

私が直接読み込む場合Photos.jspは、それがリンクを介してIEとFirefoxの両方でうまく動作しますが、ではありませんメインページの 何が間違っているのですか?私は全く新しいので、何でも教えてもらえますか?D

ありがとうございます!

+0

に自分のコンピュータ上でテストされています。アポストロフィ( ')ではなくバッククォート( ')を使用しています。 [編集ヘルプ](http://stackoverflow.com/editing-help) –

+0

を参照して、質問の書式設定の方法を簡単に見てください。多くの助けになるでしょう:) –

+0

私は難しいかもしれませんが、私は実際に私がフォーマットで変更すべきものを手に入れません。皆さんが見たいと思っていたものはすべてそこにあります。私は今何が間違っているのか理解するのはあまりにも疲れていると思う。ごめんなさい! – Liviu

答えて

-1

あなたはこのような何かを使用して試してみてください - しかし、私はjQueryの最善の解決策

あるSHURE午前私は今、あなたは(あなたが示唆された機能のように)必要なものということ持って、コードを調整し、そう。 ajax呼び出しが非同期(jQueryで同期呼び出し可能なオプションがあります)であり、関数がajax呼び出しが完了する前に未定義の値を返すため、主な問題はコールバック関数です。

この関数では、 'div'という名前が関数パラメータとして渡されるため、関数コールバックは必要ありません。

このコードは、あなたの質問をフォーマットする時間がかかるしてくださいFirefoxの3.6.13

function isIE(){return/msie/i.test(navigator.userAgent)&&!/opera/i.test(navigator.userAgent);} 

function loadXMLDoc(filename, div) 
{ 
    try 
    { 
     if (isIE()) 
     { 
      var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
     else 
     { 
      var xmlhttp = false; 
     } 
     if (!xmlhttp && typeof XMLHttpRequest != 'undefined') 
     { 
      try 
      { 
       xmlhttp = new XMLHttpRequest(); 
      } 
      catch (e) 
      { 
       xmlhttp = false; 
      } 
     } 
     if (!xmlhttp && window.createRequest) 
     { 
      try 
      { 
       xmlhttp = window.createRequest(); 
      } 
      catch (e) 
      { 
       xmlhttp = false; 
      } 
     } 
     xmlhttp.open("GET", filename); 
     xmlhttp.onreadystatechange = function() 
     { 
      if (xmlhttp.readyState == 4) 
      { 
       document.getElementById(div).innerHTML = xmlhttp.responseText; 
      } 
     } 
     xmlhttp.send(null); 
    } 
    catch (e) 
    { 
     alert(e); 
    } 
} 
+0

まず、お返事ありがとうございます。さて、あなたは私が欲しいdivの中で自分の.jspをロードするためにこれを使う方法を教えてください。私はparseFile関数を呼び出そうとしましたが、何もしませんでした。 "... document.getElementById(div).innerHTML = parseFile(file);"に変更された独自のloadXMLDoc関数を使用しようとすると何か動作しますが、 "内のdiv内 – Liviu

+0

新しいテスト済みのソリューションは投稿されたコードです。 – Vlada

+0

コードをありがとう!これはテストされたコードだと言うならば、FireFoxはまだ何らかの形で反応しないので(エラーメッセージなし、何もない)、ブラウザに何か間違ったことがあります。一方、IEではそれが動作します。今、私はphotos.jspのjavascriptのロードに失敗した理由を理解しなければなりません。私は "biggie"という名前のイメージを見ることができるので、ページ自体が読み込みますが、明らかにdisplayImages()関数はトリガされません。奇妙なのは、別のIEウィンドウで直接呼び出すとうまくいくからです。 – Liviu

関連する問題