初期リクエスト後に更新された値を送信しないAjax生成フォーム

Question

私がここで達成しようとしていることについてもっと実用的な方法があることを知っていますが、可能ならばこのモデルに固執する必要があります。

複数のHTMLテキスト入力フィールドから値をJavascript関数に送信しようとしています。 最初の提出時に期待通りに機能します。 Ajaxがフォームをコンテナdivにリロードするたびに、更新された値ではなく、元の送信の値が送信されます。どうすればこの問題を解決できますか？

呼び出しが行われた場所です：（drawNewEvent.phpから得られる出力は、divタグの中に表示される）

<? $cal = $_POST['cal']; ?> 
<button type="button" onClick="newEvent(<? echo $cal['KEY']; ?>)">Add Event</button> 

<div id="container"> 

<!--Form goes here--> 

</div> 

これは私が使用しているAjaxの機能である：

function newEvent(calID){ 
    var xmlhttp; 
    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("container").innerHTML=xmlhttp.responseText; 
     } 
    } 

    xmlhttp.open("POST","cal/draw/drawNewEvent.php",true); 
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
    xmlhttp.send("calID="+calID); 
} 

drawNewEvent .PHP：

<? $calID = $_POST['calID']; ?> 
<h1> Add Event to <? echo $calID;?></h1> 
<table border="1"><tr><td> 
<br> 
<table> 
<tr> 
<td>Event name:</td><td><input name="name" type="text" id="aname" size="32" maxlength="40" /></td> 
</tr><tr> 
<td>Date:</td><td><input name="date" type="text" id="date" maxlength="10" value="<?php echo date('Y-m-d'); ?>"/> (YYYY-MM-DD)</td> 
</tr><tr> 
<?php $hour = date('H'); $hour -= 4;?> 
<td>Starting Time:</td><td><input name="sTime" type="text" id="sTime" maxlength="8" value="<?php echo $hour.date(':i'); ?>"/> (HH:MM)</td> 
</tr><tr> 
<td>Ending Time:</td><td><input name="eTime" type="text" id="eTime" maxlength="8" value="<?php echo ($hour+1).date(':i'); ?>"/> (HH:MM)</td> 
</tr> 
<tr> 
<td>Location:</td><td><input name="location" type="text" id="alocation" size="32" /></td> 
</tr> 
<tr> 
<td>Notes:</td><td><textarea name="notes" id="notes" rows="10" cols="30"/></textarea></td> 
</tr> 
</table> 
<button type="button" name="add" 
onClick="addEvent(aname.value, date.value, sTime.value, eTime.value, alocation.value, notes.value, <?php echo $calID ?>)">Add Event </button> 
</td></tr></table> 

だけ与えられた入力を表示し、呼び出された関数：

function addEvent(name, date, sTime, eTime, location, notes, calID){ 
    alert("name: "+name + "\nDate: " + date + "\nTime: " + sTime + "-" + eTime + "\n Location: " + location + "\n Notes: " + notes + "\n CalID = " + calID); 
} 

Answer 1

あなたのcalIDは常に同じですか（それは？）。あなたはURLに同じパラメータを持つajaxリクエストを送信しており、2回目はキャッシュされたレスポンスが得られる可能性が高いため、2番目のajaxリクエストは決してサーバ経由で実行されません。私はランダムな、または変数の変更を使用してキャッシュを避けることをお勧めします。例：

var d = new Date(); 
var n = d.getTime(); 
xmlhttp.open("POST","cal/draw/drawNewEvent.php",true); 
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); 
xmlhttp.send("calID="+calID+"&random="+n); 

ここで、ajaxリクエストはブラウザから別のリクエストとして表示され、キャッシュから返されません。ここからデバッグしましょう。あなたのスクリプトは今どのように動作していますか？