Ajax generierte Form sendet keine aktualisierten Werte nach anfänglicher Anfrage

Question

Ich weiß, dass es praktikablere Möglichkeiten gibt, um das zu erreichen, was ich hier erreichen möchte, aber ich muss bei diesem Modell bleiben, wenn es möglich ist.

Ich versuche, Werte aus mehreren HTML-Text-Eingabefelder zu einer Javascript-Funktion zu senden. Es funktioniert wie erwartet bei der ersten Einreichung. Jedes Mal, wenn Ajax das Formular erneut in das Container-Div lädt, sendet es die Werte der ursprünglichen Vorlage und nicht die aktualisierten Werte. Wie würde ich das beheben?

Hier wird der Anruf getätigt wird: (resultierende Ausgabe von drawNewEvent.php Displays innerhalb der Div-Tags)

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

<div id="container"> 

<!--Form goes here--> 

</div> 

Dies ist die Ajax-Funktion Ich verwende:

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> 

die Funktion wird aufgerufen zeigt nur die gegebene Eingabe:

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

Nun, Ihre calID ist immer die gleiche (soll es sein?). Sie senden eine Ajax-Anfrage mit denselben Parametern in der URL und höchstwahrscheinlich erhalten Sie beim zweiten Mal eine zwischengespeicherte Antwort, sodass die zweite Ajax-Anfrage niemals über den Server ausgeführt wird. Ich würde vorschlagen, Caching zu vermeiden, indem Sie eine zufällige oder sich ändernde Variable verwenden. Zum Beispiel:

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); 

Jetzt ist Ihre Ajax-Anforderung vom Browser als eine andere Anfrage gesehen und ist nicht aus dem Cache zurückgegeben wird. Lass uns von hier debuggen. Wie verhält sich Ihr Skript jetzt?