Form I sayfadaki gizli bir div içine bir form yükler aşağıdaki javascript var ve ettik IE

Question

gösterilmiyor gösterileri bu aşağıdaki kısmi bir görünüm yükler

function load() { 
    ...stuff to get date and id... 
    var xhttp = new XMLHttpRequest(); 
    xhttp.onreadystatechange = function() { 
     if (xhttp.readyState==4&&xhttp.status==200) { 
      document.getElementById("PopupDiv").innerHTML = xhttp.responseText; 
      document.getElementById("PopupDiv").removeAttribute("hidden"); 
      alert(xhttp.responseText); 
     } 
    }; 
    xhttp.open("GET", "Object?date=" + date + "&id=" + id, true); 
    xhttp.send(); 
} 

div:

Javascript olayı tetiklendiğinde, DOM gezgini görüntülendiğinde her şey doğru şekilde yüklenir, ancak form gösterilmez.

<h2>@Model.date</h2> 
<h2>@Model.id</h2> 
<div id="OptionsDiv"> 
    @using (Html.BeginForm("Confirm", "Plan",FormMethod.Post,new { id = "OptionsForm" })) 
    { 
     @Html.HiddenFor(x => x.date) 
     @Html.HiddenFor(x => x.id) 
     @Html.LabelFor(x => x.options) 
     @Html.DropDownListFor(x => x.options, Model.optionsDropdown) 
     <br /> 
     @Html.LabelFor(x => x.comment) 
     @Html.TextBoxFor(x => x.comment) 
     <br /> 
     <input type="submit" value="Submit"/> 
    } 
</div> 
<p>test after the div</p> 

önce ve sonra bilgi gösterilir, ancak formda hiçbir şey yoktur.

<h2>5/12/2016 12:00:00 AM</h2> 

<h2>13</h2> 

<div id="OptionsDiv"> 

<form action="/Plan/Confirm" id="PlanOptionsForm" method="post"><input data-val="true" data-val-date="The field date must be a date." data-val-required="The date field is required." id="date" name="date" type="hidden" value="5-12-2016" /><input data-val="true" data-val-number="The field Id must be a number." data-val-required="The Id field is required." id="Id" name="Id" type="hidden" value="13" /><label for="Options">options</label><select data-val="true" data-val-number="The field meal must be a number." data-val-required="The meal field is required." id="meal" name="meal"><option selected="selected" value="0">--Choose an Option--</option> 

<option value="1">Option 1</option> 

<option value="2">Option 2</option> 

<option value="3">Option 3</option> 

<option value="4">Option 4</option> 

</select>  <br /> 

<label for="comment">comment</label><input data-val="true" data-val-number="The field servings must be a number." data-val-required="The comment field is required." id="comment" name="comment" type="text" value="0" />  <br /> 

     <input type="submit" value="Submit"/> 

</form></div> 

<p>test after the div</p> 

DOM kaşif gidip farklı bölümlerini seçerseniz, onlar görünecektir, fakat ilk yükleme gibi görünüyor:

yanıttan uyarı içeriyor

Her şey doğru şekilde Chrome ve Firefox'ta görüntüleniyor

Ayrıca, sayfadaki diğer formları kaldırmak sorunu çözmüyor .

Answer 1

Görünüşe göre, bir formu gizli bir öğeye yükleyemezsiniz.

document.getElementById("PopupDiv").innerHTML = xhttp.responseText; 
document.getElementById("PopupDiv").removeAttribute("hidden"); 

için:

ben benim JavaScript işlevi sırasını değiştirdi

document.getElementById("PopupDiv").removeAttribute("hidden"); 
document.getElementById("PopupDiv").innerHTML = xhttp.responseText; 

ve şimdi çalışıyor.