Call php function from javascriptから適応したコードでは、リンクにマウスオーバーするたびに Ajax 呼び出しを行って PHP スクリプトを実行し、Cookie を渡して、PHP スクリプトが識別子を使用して MySQL を検索できるようにします。初めてページを実行したときに機能しています。しかし、その後、どのリンクにマウスを合わせても、イベントのターゲットはその最初のリンクであると見なされます。
<ul>
<li><a href="mypage.html?eventID=1" class="1">Event 1</a></li>
<li><a href="mypage.html?eventID=2" class="2">Event 2</a></li>
<li><a href="mypage.html?eventID=3" class="3">Event 3</a></li>
</ul>
<div id="modalMask">
<div id="modalContent">
Loading...
</div>
</div>
<script src="ajaxRequest.js" type="text/javascript"></script>
<span id="output"></span>
リンクを使用する関数は次のとおりです。
function getOutput()
{
if (typeof e == 'undefined') e = window.event //we always do this in event handler, to make IE work
var target = e.target || e.srcElement; //Another IE hack, so we can get the element the event relates to
var ID = target.className;
document.getElementById('output').innerHTML = ID;
var ajax = getRequest();
ajax.onreadystatechange = function(){
if(ajax.readyState == 4){
document.getElementById('modalContent').innerHTML =
ajax.responseText + '<br><input type="button" onclick = "closeModalPopupWindow()" id="closeModal" value="Close">';
}
}
ajax.open("GET", "do_query.php?eventID="+ID, true);
ajax.send(null);
}
これは、http: //jsfiddle.net/briggs_w/BWbuX/1/の jsFiddle で実証されています 。Ajax 呼び出しはコメントアウトされていますが、スニペットを挿入しました
var ID = target.className;
document.getElementById('output').innerHTML = ID;
リンクのclassNameが見えるように。コンソール デバッガーが検証します。それは常に、ページの読み込み後に最初にマウスオーバーしたリンクです。