ユーザーがチェックアウト段階で選択した本のリストから図書館の本を削除できるようにする結果テーブルがあります。ユーザーがリスト内の本の横にある [削除] ボタンをクリックすると、ページをリロードせずにページから削除されるように、単純な AJAX 手法を実装しました。これはすべてうまく機能しています。
また、選択した本の数を示すページネーションを処理するページ上の別の要素も更新する必要があります。リストの上部には、このページネーションの概要があります。
<div class="recordlist_nav">Displaying records 1 - 10 of 10 records selected</div>
リストから本を削除するだけでなく、これも更新する必要があります。たとえば、1 本を削除した場合は、次のように変更する必要があります。
<div class="recordlist_nav">Displaying records 1 - 9 of 9 records selected</div>
更新された文字列を生成できますが、AJAX スクリプトで複数の要素を同時に更新する方法がわかりません。これが私のスクリプトです:
<script type="text/javascript">
function deleteRecord(recid,articleID) {
// Allocate an XMLHttpRequest object
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari
var xmlhttp=new XMLHttpRequest();
} else {
// IE6, IE5
var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
// Set up the readyState change event handler
xmlhttp.onreadystatechange = function() {
if ((this.readyState == 4) && (this.status == 200)) {
document.getElementById("selectedRecord" + recid).innerHTML=xmlhttp.responseText;
}
}
// Open an asynchronous POST connection and send request
xmlhttp.open("POST", "delete_record.php", true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("recid="+recid+"&articleID="+articleID);
return false; // Do not follow hyperlink
}
</script>
現在、delete_record.php は、選択されたレコードを削除するときに空の文字列を単にエコーします。
$result = '';
echo $result ;
更新されたページネーション ヘッダーを $navigation 変数に格納しています。これをスクリプトに戻し、そのスクリプトで の内容を $navigation 変数の内容に置き換える必要があります。