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 всегда одинаковый (это должно быть?). Вы отправляете запрос ajax с теми же параметрами в URL-адресе, и, скорее всего, во второй раз вы получаете кешированный ответ, поэтому второй запрос 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 рассматривается в браузере как различный запрос и не возвращается из кэша. Давайте отлаживаем отсюда. Как теперь работает ваш скрипт?