javascript - 表单在 IE 中不显示

Question

我有以下 javascript 将表单加载到页面上的隐藏 div 中并显示 div

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

这会加载一个包含以下内容的局部 View :

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

当触发javascript事件时，查看DOM资源管理器时全部正确加载，但不显示表单。显示之前和之后的信息，但表格中没有任何内容。

响应中的警报包含:

<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 资源管理器并选择不同的部分，它们就会显示出来，但初始加载看起来像:

这一切都在 Chrome 和 Firefox 中正确显示

此外，删除页面上的其他表单也不能解决问题。

Answer 1

显然，您不能将表单加载到隐藏元素中。

我更改了 JavaScript 函数中的顺序:

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

收件人:

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

现在可以了。