データベース内の情報を表示するリストがあり、データベースにアイテムを追加するときにリストを更新したいと考えています。
function getList(id) {
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("list").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "tool/getlist.php?q=" + id);
xmlhttp.send();
}
function addItem() {
$.post('tool/addListItem.php', $("#addItem").serialize());
var listID = $("#addItem").serializeArray()[0].value;
getList(listID);
}
情報は問題なく追加されます。問題は、addItem() から getList 関数を呼び出すと、最初は何も起こらず、再度呼び出すと更新されますが、3 回目は何も起こらず、4 回目は更新されます。
更新前に警告を表示してデバッグを実行しました。
var listID = $("#addItem").serializeArray()[0].value;
alert(listID);
getList(listID);
これを行うと、[OK] をクリックすると正常に更新されます。
私はまだ JavaScript と ajax 全般にかなり慣れていないので、単純な間違いである可能性がありますが、過去数時間、私を夢中にさせていました。