2013-03-16 12 views
5

ドロップダウン選択リストと、ボタンをクリックしたときに基本的に含まれる関数を呼び出すようにonclickイベントを挿入したボタンがあります。 ajax、実行時にはphpファイルが含まれます。私のPHPファイルでは、選択されたドロップダウンリストから値を取得しています。その後、警告オプションが表示されますが、警告は表示されません。ajaxにphpファイルを含めるとJavascriptが機能しない

以下

私のコードです: -

<html> 
<head> 
<script> 
function showUser(str) 
{ 
if (str=="") 
    { 
    document.getElementById("txtHint").innerHTML=""; 
    return; 
    } 
if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
    } 
else 
    {// code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
xmlhttp.onreadystatechange=function() 
    { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText; 
    } 
    } 
xmlhttp.open("GET","user.php?q="+str,true); 
xmlhttp.send(); 
} 
</script> 
</head> 
<body> 

<form> 
<select name="users1" onchange="showUser(this.value)"> 
<option value="">Select a person:</option> 
<option value="1">Peter Griffin</option> 
<option value="2">Lois Griffin</option> 
<option value="3">Glenn Quagmire</option> 
<option value="4">Joseph Swanson</option> 
</select> 
</form> 
<br> 
<div id="txtHint"><b>Person info will be listed here.</b></div> 

</body> 
</html> 

user.php

<?php 
$q=$_GET["q"]; 
if($q ==1) 
{ 
    echo '<script type="text/javascript"> 
    alert("Hello") 
    </script>'; 
} 
else { 
    echo "No"; 
} 
?> 

すべてのヘルプは、事前に多くの、あなたの助けに感謝をいただければ幸いです:)

+0

は、あなたが 'わかりますアドレスバーの「user.php?q = 1」? – Amir

+0

いいえ、私は私のアドレスバーでそれを見ることができませんbcoz user.phpは、ページがリフレッシュされていない理由は、AJAXを介してロードされています –

+2

http://stackoverflow.com/questions/2067472/what-is-jsonp-allあなたがする必要があることすべてを説明しています。 –

答えて

0

私にはありませんページに動的に追加する「スクリプト」タグが解析され実行されると考えてください。しかし、あなたの答え(yes/no)を含めて、あなたのuser.phpからjsonオブジェクトを返すことができます。そして、onreadystatechangedコールバックに何を表示するかを決めることはできません。それとも、「はい」/「いいえ」を返し、ような何か:

<?php 
$q=$_GET["q"]; 
if($q ==1) 
{ 
    echo "Yes"; 
} 
else { 
    echo "No"; 
} 
?> 

とあなたのメインページで:

if(xmlhttp.responseText === "yes"){ 
alert("Hello"); 
} 
else{ 
alert("No"); 
} 
+0

ユーザーページで取得された値はどうですか? –

+0

私は質問を編集しました – Chris

+1

今、私が行ったことは、if(xmlhttp。responseText === "yes"){ アラート( "こんにちは"); } else { アラート( "いいえ"); }私のshowusr機能では、私は任意のオプションをクリックしているときは、それは "いいえ"の値で警告を表示しています。 –

0

あなたは、体内へのAJAX呼び出しから受け取るHTMLを挿入してみます。

document.getElementsByTagName('body')[0].appendChild(xmlhttp.responseText); 

明らかに、これが機能する場合は、追加するデータがあることを確認する必要があります。そうしないと、エラーが発生する可能性があります。

私はAJAXを介して取得するPHPスニペットファイルでスクリプトを使用することが多く、何かに追加するまでスクリプトが動作しないことがわかりました。私はだけscriptタグを返すPHPファイルを試したことはありませんが、理論的には同じに動作するはずです。

EDIT: jQueryを使用していないことを認識したときに変更されたコード例をJavascriptに変更しました。実際、私はjQueryを使わずにこれをやっていないので、動作するとは思えませんが、とにかく試してみてください。私はおそらくappendChild()innerHTMLを使用すると異なる結果を与えると思います。

EDITはAGAIN:私は現在できないですのでは再び、私はこれをテストしていませんが、おそらくdocument.createDocumentFragment()xmlhttp.responseTextをラップはうまくいくかもしれない:

var frag = document.createDocumentFragment(); 
frag.innerHTML = xmlhttp.responseText; 
document.getElementsByTagName('body')[0].appendChild(frag); 
+1

私は-1がこれは動作しないことを意味すると思います。自分自身を試してみることなく何かを提案することに対する謝罪。 jQueryが使用されていないことを認識したときに、編集したものよりも削除したほうがいいでしょう。私は匿名のdownvotesはSE上で問題ないことを知っている、と私はそれが良いことだと思うが、これは私が理由について混乱して初めてではない。真剣に、私はより良くしたい - なぜあなたがdownvoteの理由の兆候を与えない場合は、どのように問題を修正するはずですか? –

+0

私は本当にあなたの時間と私の答えのために助けに感謝します。それは私のために働いていませんが、私はあなたの答えに-1をした人ではありませんでした。正直言って、今まで答えのどれにも-1をしたことはなかった。他人に意見を与えることは本当に重要だと私は思う。少なくともあなたは何かを試してみました。おかげで多くの男:)) –

+1

申し訳ありませんが、私はsnarkyを鳴らすつもりはなかった、と私は確かに指を指していない。ちょうどシステムに挫折しました:-) –

0

利用showUser(this.options[this.selectedIndex].value)代わりのshowUser(this.value)

編集:

$q=$_GET["q"];から$q=intval($_GET["q"]);

クリスはすでに指摘したよう
+0

それでも私は同じことを私に見せています –

1

だから、あなたはAJAXを使用する場合は持っていたなどとして、あなたはDOMのアップデートであなたのページにそれを置くことができ、あなたには、いくつかのテキストを返すように説明呼び出し:

document.getElementById("txtHint").innerHTML=xmlhttp.responseText; 

が機能すること。しかし、あなたのresponseTextにjavascriptが含まれている場合、それは単にドキュメントに投稿されるだけです。あなたのページはすでに読み込みが完了しているので、ではありません。

しかし、明らかにAJAX呼び出しの結果として2つの動作が必要です。 txtHint divにユーザーデータの本体をポストすることに加えて、アラートポップアップを表示させたい場合もあります。これを行うには、onreadystatechange関数のtxtHint divにポストした後に、アラートのコードを配置することができます。

あなたはどのようなロジックを警告を制御したいのかはあなたの質問からは明らかではありません。

if (str=="1") alert("Hello"); 
else   alert("No"); 

代わりにした場合、アラートの内容は依存すべき:あなたが「こんにちは」の選択のいくつかの選択肢のためにと、「いいえ」、他の選択肢のために言って警告をしたい場合は、あなたは自分の選択入力をテストすることができますあなたのAJAX呼び出しが返すもので、代わりにxmlhttp.responseTextに基づいた他のロジックがあります。おそらく、あなたはuser.phpが返信した応答に警告の本文を書き込むことさえあります。それから、あなたはresponseTextからそれを解析し、あなたのアラートでそれを使い、それを取り除き、残りを使ってtxtHintのコンテンツを設定することができます。

0

==と===

if(xmlhttp.responseText == "yes"){ 
alert("Hello"); 
    } 
else{ 
alert("No"); 
} 

スワップを試してみてください

+0

"abc" ==新しい文字列( "abc")// true "abc" ===新しい文字列( "abc") // false –

0

問題のinnerHTML = ...で、スクリプトを追加すると、DOMにスクリプトを追加んが、自動的に評価しません(実行)ということですスクリプト。これに

if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
     document.getElementById("txtHint").innerHTML=xmlhttp.responseText; 
    } 

:この変更

if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
     document.getElementById("txtHint").innerHTML=xmlhttp.responseText; 
     var myScripts = document.getElementById("txtHint").getElementsByTagName("script"); 
     if(myScripts.length > 0) 
     { 
      for(i=0; i < myScripts.length;i++) 
      { 
       eval(myScripts[i].innerHTML); 
      } 
     } 
    } 

この方法は、あなたの非同期のすべては、スクリプトが評価されます追加しました。

0
<html> 
<head> 
<script> 
function showUser(str) 
{ 
if (str=="") 
    { 
    document.getElementById("txtHint").innerHTML="<b>Person info will be listed here.</b>"; 
    return; 
} 

if (window.XMLHttpRequest) 
    {// code for IE7+, Firefox, Chrome, Opera, Safari 
    xmlhttp=new XMLHttpRequest(); 
    } 
else 
    {// code for IE6, IE5 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
xmlhttp.onreadystatechange=function() 
    { 
    if (xmlhttp.readyState==4 && xmlhttp.status==200) 
    { 
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText; 

    //////////// YOU CAN ADD THIS!/////////////////// 
    if (str=="1"){alert('hello');} 
    //////////////////////////////////////////////// 

    } 
    } 
xmlhttp.open("GET","user.php?q="+str,true); 
xmlhttp.send(); 

} 
</script> 
</head> 
<body> 

<form> 
<select name="users1" onchange="showUser(this.value)"> 
<option value="">Select a person:</option> 
<option value="1">Peter Griffin</option> 
<option value="2">Lois Griffin</option> 
<option value="3">Glenn Quagmire</option> 
<option value="4">Joseph Swanson</option> 
</select> 
</form> 
<br> 
<div id="txtHint"><b>Person info will be listed here.</b></div> 

</body> 
</html> 
0

Fiddlerを実行して、サーバー間のトラフィック/出力を確認してください。それはuser.phpの出力が何であるかの洞察を与えるだろうか?デバッグに役立ちます。

0

残念ながら、すでに伝えられているように、innerHTMLを使用してスクリプトを追加することはできません。 あなたの最善の策は、DOM APIを非常に簡単に処理するjQueryのようなDOMハンドラを使用することです。 あなたには、いくつかのJavascriptを書き込むことによりだろう必要なものを行うには良い方法:

var jsTag = document.createElement('script'); 
var jsCode = "alert('this came from PHP or whatever you have on server side');"; 
jsCode = document.createTextNode(jsCode); 
jsTag.appendChild(jsCode); 
document.body.appendChild(jsTag); 

または、jQueryを使って、それはのようになります。

$('body').append("<script>alert('this came from PHP or whatever you have on server side');</script>"); 

〜歓声〜

関連する問題