¿Por qué este script DateTimePicker hace que IE6 e IE7 no carguen la página?
Tengo algunas páginas en un sitio asp.net MVC 3 que hacen que IE6 y 7 indiquen "No se puede cargar la página" después de cargar el menú. He podido solucionar este problema hasta el siguienteDateTimePicker guión:
<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>
Creo que este es el error que está tirando:
Error de análisis HTML: no se puede modificar el elemento contenedor primario antes de que se cierre el elemento secundario
Ahora he resuelto este problema, sin embargo quiero saber¿Por qué está sucediendo en primer lugar? ¿Es un error en algunas versiones de IE? Noté que en una instalación de IE7, si instala las actualizaciones estándar, el error desaparece y algunas personas han dicho que tuvieron el error en IE8.
Básicamente, este problema es que tengo mi página de diseño MVC que se parece a esto:
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<section>
@RenderBody()
</section>
<footer>
</footer>
</body>
</html>
Y las páginas que tienen el problema contienen algo como esto:
<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>
Seguido por el script anterior. Así que la página con el script se renderiza dentro de la<section> etiqueta.
Para resolver el problema, todo lo que hay que hacer es separar laform desde elscript así que todo lo que hice fue hacer la forma en el@RenderBody() como se ve a continuación y el guión en el@RenderSection("Scripts").
<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<section>
@RenderBody()
</section>
<footer>
</footer>
@RenderSection("scripts", false)
</body>
</html>
Así que esto solucionó la pregunta pero ¿por qué? Hizo el<section> ¿La etiqueta debe cerrarse antes de la secuencia de comandos? Más interesante, esto es solo un problema en las páginas conDateTimePicker guión. Tengo muchas páginas con secuencias de comandos similares y más complejas que no tienen problemas.