Mam następujący skrypt, który ładuje formularz do ukrytego div na stronie i pokazuje divFormularz nie pokazuje w IE
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();
}
ten ładuje się częściowy widok z poniższym:
<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>
po wywołaniu zdarzenia javascript, wszystko jest poprawnie załadowane podczas przeglądania eksploratora DOM, ale formularz nie jest wyświetlany. wyświetlane są informacje przed i po, ale nic w formularzu.
alert z odpowiedzi zawiera:
<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>
Jeśli pójdę do eksploratora DOM i wybrać poszczególne elementy będą wyświetlane, ale początkowe obciążenie wygląda następująco:
Wszystko poprawnie wyświetla się w przeglądarce Chrome i Firefox
Usunięcie innego formularza na stronie nie rozwiązuje problemu .
Czy twoja strona zawiera "formularz" wokół 'popupDiv'? –
Istnieje inny formularz na stronie, ale nie zawiera on mojego popupDiv – Alex
Jeśli 'popupDiv' nie jest w formularzu, to działa w Edge zgodnie z oczekiwaniami. Jeśli 'popupDiv' jest wewnątrz formularza, to Edge (i FF) usuwa wewnętrzny" formularz "i zachowuje zewnętrzny. Została wyświetlona zawartość wewnętrznego formularza. Prześlij do działania zewnętrznego formularza. Oto, co odkryłem z eksperymentu. Zagnieżdżone formularze są niedozwolone. EI 11 robi to samo. Sprawdź zawartość odpowiedzi Xhr. –