#javascript #php #xmlhttprequest
Вопрос:
Я работаю над страницей для получения и отображения записи на прием. Конечный пользователь должен иметь возможность редактировать данные. Однако после извлечения данных и перезагрузки div:
- кнопка календарь не открывает календарь для изменения даты
- Пользователь может обновить данные, но при сохранении передаются старые данные. Проверка элементов показывает, что старые данные все еще связаны в качестве входного значения
Я заметил, что некоторые элементы в оригинале написаны прописными буквами, а после получения-строчными. Имеет ли это какое-то значение?
function GetAppt(form) {
var Dval = document.querySelector('input[name = "sel"]:checked').value ;
if(Dval == 0) {
return;
} else {
if (window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 amp;amp; xmlhttp.status == 200) {
var ApptDisplay = document.getElementById('ApptEntry');
ApptDisplay.innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET","../fn/GetAppt.php?A=" Dval,true);
xmlhttp.send();
}
Оригинальный DIV:
<div id="ApptEntry">
<p align="left" style="margin-left: 30; margin-top: 1; margin-bottom: 1">
Appointment Date <input class="lbl1" type="text" name="txtApptDate" id="txtApptDate" size="12" tabindex="1" value="" required>
<A HREF="#" onClick="cal5.select(document.forms['ApptCRUD'].txtApptDate,'anchor5','MM/dd/yyyy'); return false;"
TITLE="cal5.showCalendar('anchor5'); return false;"
NAME="anchor5" ID="anchor5"><img src="../img/cal.gif" width="16" height="16" border="0" alt="Appointment Date"></A>amp;nbsp;amp;nbsp;
<A HREF="#" onClick="div_show()"><img src="../img/ReOccur.gif" width="18" height="18" border="0"></A>amp;nbsp;amp;nbsp;amp;nbsp;
<label>Start Time</label><input size="12" type="text" tabindex="2" name="StTime" required onblur="CalcEnd(this.form)">amp;nbsp;amp;nbsp;amp;nbsp;
Facility : <select tabindex="3" name="Hosp" id="Hosp_Id" required onchange="GetAnesList(this.form)">
<option value="0">Please Select</option><option value="73">Some Hospital</option></select>amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;
<label>Confirm No.</label><input size="12" readonly="readonly" type="text" id="Confirm" name="Confirm" >
</p>
<label>Patient Name</label><input size="40" tabindex="4" name="PtName">amp;nbsp;amp;nbsp;amp;nbsp;
<label>Surgeon</label><select tabindex="9" name="Surg" id="Surg_Id" onchange="GetAnesList(this.form)"><option value="0">Please Select</option>n<option value="927">Some Surgeon</option></select><br><br>
<div id="AnesList">
<label class="lbl1">Anes</label><select tabindex="11" name="Anes" id="Anes_Id">
<option value="0">Assignment Pending</option></select>
</div>
Comments<br><textarea tabindex="11" name="PtComment"></textarea>
</div>
GetAppt.php результаты xmlhttp.открыть выше:
<div id="ApptEntry">
<p style="margin-left: 30; margin-top: 0; margin-bottom: 1" align="left">
Appointment Date <input class="lbl1" type="text" name="txtApptDate" id="txtApptDate" size="12" tabindex="1" value="10/13/2021" required="">
<a href="#" onclick="cal5.select(document.forms[" apptcrud"].txtapptdate,"anchor5","mm="" dd="" yyyy");="" return="" false;"=""
title="cal5.showCalendar(" anchor5");=""
name="anchor5" id="anchor5"><img src="../img/cal.gif" alt="Appointment Date" width="16" height="16" border="0"></a>
<a href="#" onclick="div_show()"><img src="../img/ReOccur.gif" width="18" height="18" border="0"></a>amp;nbsp;amp;nbsp;amp;nbsp;
<label>Start Time</label><input size="12" type="text" tabindex="2" name="StTime" onblur="CalcEnd(this.form)" value="09:00 AM">amp;nbsp;amp;nbsp;amp;nbsp;
Facility : <select tabindex="3" name="Hosp" id="Hosp_Id" onchange="GetAnesList(this.form)">
<option value="0">Please Select</option><option selected="selected" value="73">Some Hospital</option></select>amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;
<label>Confirm #</label><input size="12" readonly="readonly" type="text" name="Confirm" value="JG092897009">
</p>
<label>Patient Name</label><input size="40" tabindex="4" name="PtName" value="Joe Gish">amp;nbsp;amp;nbsp;amp;nbsp;
<label>Surgeon</label><select tabindex="9" name="Surg" id="Surg_Id" onchange="GetAnesList(this.form)">
<option value="0">Please Select</option>n<option selected="selected" value="970">Some Surgeon</option></select><br><br>
<div id="AnesList"><label class="lbl1">Anes</label>
<select tabindex="10" name="Anes" id="Anes_Id"><option selected="selected" value="0">Assignment Pending</option><option value=""></option></select>
</div>
<label>Comments</label><br><textarea rows="2" cols="80" tabindex="11" name="PtComment">Daily every 3 days, end by 13 Oct</textarea>
<input type="submit" tabindex="12" value="Save">amp;nbsp;amp;nbsp;amp;nbsp;
<input type="reset" tabindex="13" value="Reset Data">amp;nbsp;amp;nbsp;amp;nbsp;
<button id="btnDel" onclick="SetDelete(this.form)">Delete Appointment</button>amp;nbsp;amp;nbsp;amp;nbsp;
<button type="button" onclick="SetCopy(this.form)">Copy Appointment</button>
</div>
Комментарии:
1. Я заметил, что некоторые элементы в оригинале написаны прописными буквами, а после получения-строчными. Имеет ли это какое-то значение? ДА
2. Возможно, вам также придется иметь дело с кавычками в первой ссылке, атрибут onclick, похоже, создан неправильно
<a href="#" onclick="cal5.select(document.forms[" apptcrud"].txtapptdate,"anchor5","mm="" dd="" yyyy");="" return="" false;"="" title="cal5.showCalendar(" anchor5");="" name="anchor5" id="anchor5">
3. Вместо отладки нескольких файлов я вместо этого вернул массив только данных и обновил поля данных с помощью js. Упростил управление всем процессом и его настройку для будущих изменений