ho ottenuto il seguente javascript che carica un modulo in un div nascosto nella pagina e gli spettacoli del divmodulo non mostrando in 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();
}
questa carica una vista parziale con il seguente:
<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>
quando viene attivato l'evento javascript, viene caricato tutto correttamente durante la visualizzazione di DOM explorer, ma il modulo non viene visualizzato. vengono visualizzate le informazioni prima e dopo, ma nulla all'interno del modulo.
l'avviso dalla risposta contiene:
<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>
Se vado in explorer DOM e selezionare le diverse parti, essi appariranno, ma il carico iniziale si presenta come:
Tutto viene visualizzato correttamente in Chrome e Firefox
Inoltre, la rimozione dell'altro modulo sulla pagina non risolve il problema .
La tua pagina contiene un 'form' attorno a' popupDiv'? –
C'è un altro modulo nella pagina ma non contiene il mio popupDiv – Alex
Se 'popupDiv' non è all'interno del modulo, funziona in Edge come previsto. Se 'popupDiv' si trova nella forma, Edge (e FF) rimuove' form 'interno e ne mantiene uno esterno. Il contenuto del modulo interno è mostrato. Invia va all'azione modulo esterno. Questo è ciò che ho trovato dall'esperimento. I moduli annidati non sono consentiti. EI 11 fa lo stesso. Controlla il contenuto della tua risposta xhr. –