ページ(index.php)に次のコードがあります。これは2つのDIVで構成されています。1つはフォームを含む左側(#leftDIV)で、もう1つはエラーメッセージを受信するDIV(#messages)です。右側のDIV(#mapAJAX)には、エラーメッセージをその#messagesDIVに送信する必要があるPHPスクリプトが含まれています。
<div id="leftDIV">
<form method="post" onsubmit="return false;">
...
Some code here
...
<input type=button value="Cercar" onclick="search();"/>
<input type=reset value="Esborrar" />
</form>
<div id="messages"> </div>
</div>
<div id="mapAJAX"></div>
フォームが送信されると、Javascript関数が呼び出され、XMLHttpRequestオブジェクトが作成されて右側にPHPスクリプトが読み込まれます。フォームが送信されるたびに、右側のコンテンツのみを再読み込みするという考え方です。この新しいスクリプト(map.php)内でデータベースを検索し、同じ右側のDIV内のマップに結果をロードします。
問題が発生した場合は、前述の#messages DIV内にエラーを表示したいのですが、map.phpスクリプトからそのDIVにそれらのメッセージを送信する方法がわかりません。#messages idを持つDOM要素を検索するだけでは機能しません。これは、そのスクリプトが左側のDIVにすぐにアクセスできないためです。
私はこの投稿を読みました:
しかし、新しいメッセージが生成されたら、メッセージの表示をトリガーする方法がわかりません。それで、なにかお手伝いできますか?
また、新しいタイトルを自由に提案してください。私がさらしている問題を完全に説明しているかどうかはわかりません。
前もって感謝します。
編集:要求に応じて、index.phpファイル内にあるAJAXコードを次に示します。この関数は、search()がフォーム値をいくつかチェックした後に呼び出されます。AJAX.jsというファイルを使用して、XMLHttpRequestの作成を容易にします。
function loadMap(ciutat, tipusCuina){
var div = document.getElementById("mapAJAX");
var oXMLHttpRequest = createXMLHttpRequestObject();
var url = "mapa.php?ciutat=" + ciutat + "&tipusCuina=" + tipusCuina;
oXMLHttpRequest.open('GET', url);
oXMLHttpRequest.onreadystatechange = function(){
if(oXMLHttpRequest.readyState == 4){
if(oXMLHttpRequest.status == 200){
div.innerHTML = oXMLHttpRequest.responseText;
}
else{
alert("Hi ha hagut un problema amb la recepcio del mapa.");
}
}
}
oXMLHttpRequest.send(null);
}