DIV не работает после извлечения данных с помощью XMLHttpRequest()

#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. Упростил управление всем процессом и его настройку для будущих изменений