Warum führt dieses DateTimePicker-Skript dazu, dass IE6 und IE7 die Seite nicht laden
Ich habe einige Seiten auf einer asp.net MVC 3-Site, die dazu führen, dass IE6 und 7 nach dem Laden des Menüs die Meldung "Seite kann nicht geladen werden" auslösen. Ich konnte das Problem folgendermaßen behebenDateTimePicker Skript:
<script type="text/javascript">
$('#StartDateTime').datetimepicker({
onClose: function(dateText, inst) {
var endDateTextBox = $('#EndDateTime');
if (endDateTextBox.val() != '') {
var testStartDate = new Date(dateText);
var testEndDate = new Date(endDateTextBox.val());
if (testStartDate > testEndDate)
endDateTextBox.val(dateText);
}
else {
endDateTextBox.val(dateText);
}
},
onSelect: function (selectedDateTime){
var start = $(this).datetimepicker('getDate');
$('#EndDateTime').datetimepicker('option', 'minDate', new Date(start.getTime()));
}
});
$('#EndDateTime').datetimepicker({
onClose: function(dateText, inst) {
var startDateTextBox = $('#StartDateTime');
if (startDateTextBox.val() != '') {
var testStartDate = new Date(startDateTextBox.val());
var testEndDate = new Date(dateText);
if (testStartDate > testEndDate)
startDateTextBox.val(dateText);
}
else {
startDateTextBox.val(dateText);
}
},
onSelect: function (selectedDateTime){
var end = $(this).datetimepicker('getDate');
$('#StartDateTime').datetimepicker('option', 'maxDate', new Date(end.getTime()) );
}
});
</script>
Ich glaube, das ist der Fehler, den es wirft:
HTML-Analysefehler: Das übergeordnete Containerelement kann nicht geändert werden, bevor das untergeordnete Element geschlossen wird
Jetzt habe ich dieses Problem behoben, möchte es aber wissenwarum passiert es überhaupt? Ist es ein Fehler in einigen Versionen des IE? Ich habe festgestellt, dass bei einer Installation von IE7 der Fehler verschwindet, wenn Sie die Standard-Updates installieren, und einige Leute haben angegeben, dass sie den Fehler in IE8 hatten.
Grundsätzlich ist dieses Problem, dass ich meine MVC-Layoutseite habe, die so aussieht:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<section>
@RenderBody()
</section>
<footer>
</footer>
</body>
</html>
Und die Seiten, auf denen das Problem auftritt, enthalten ungefähr Folgendes:
<h2>Test</h2>
<form action="/Home/Test" data-ajax="true" data-ajax-loading="#loading-progress"
data-ajax-method="GET" data-ajax-mode="replace" data-ajax-update="#results"
id="form0" method="post">
Start Time
<br />
<input data-val="true" data-val-required="The StartDateTime field is required."
id="StartDateTime" name="StartDateTime" type="text" value="" />
<br />
End Time
<br />
<input data-val="true" data-val-required="The EndDateTime field is required."
id="EndDateTime" name="EndDateTime" type="text" value="" /> <br />
<br />
<input type="submit" value="Search" />
<img id="loading-progress" src="../../Content/images/ajax-loader.gif" alt="loading"/>
</form>
<div id="results"></div>
Gefolgt von dem obigen Skript. Die Seite mit dem Skript wird also in der gerendert<section> Etikett.
Um das Problem zu lösen, müssen Sie lediglich dieform von demscript Alles was ich getan habe war, das Formular in der zu rendern@RenderBody() wie unten zu sehen und das Drehbuch in der@RenderSection("Scripts").
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<section>
@RenderBody()
</section>
<footer>
</footer>
@RenderSection("scripts", false)
</body>
</html>
Das behebt also die Frage, aber warum? Tat das<section> Tag muss vor dem Skript geschlossen werden? Interessanterweise ist dies nur ein Problem auf Seiten mit demDateTimePicker Skript. Ich habe viele Seiten mit ähnlichen und komplexeren Skripten, die keine Probleme haben.