首页 > 其他分享> > 为什么此DateTimePicker脚本导致IE6和IE7无法加载页面

为什么此DateTimePicker脚本导致IE6和IE7无法加载页面

2019-10-11 13:37:00 作者：互联网

我在asp.net MVC 3网站上有几页,导致IE6和7在加载菜单后提示“无法加载页面”.我已经能够解决以下DateTimePicker脚本的问题：

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

我相信这是它抛出的错误：

HTML Parsing Error: Unable to modify the parent container element
before the child element is closed

现在我已经解决了这个问题,但是我想知道为什么会首先发生？是某些版本的IE中的错误吗？我注意到,在一次安装IE7的过程中,如果安装标准更新,该错误就会消失,并且有人说他们在IE8上存在错误.

基本上,这个问题是我的MVC布局页面如下所示：

<!DOCTYPE html>
<html>
<head>
    ...
</head>
<body>
<section>
    @RenderBody()
</section>
<footer>
</footer>
</body>
</html>

有问题的页面包含以下内容：

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

然后是上面的脚本.因此带有脚本的页面将呈现在< section>内部.标签.

解决此问题所需要做的就是将表单与脚本分开,因此我所做的就是在@RenderBody()中呈现表单,如下所示,在@RenderSection(“ Scripts”)中呈现脚本.

<!DOCTYPE html>
<html>
<head>
    ...
</head>
<body>
<section>
    @RenderBody()
</section>
<footer>
</footer>
@RenderSection("scripts", false)
</body>
</html>

因此,这解决了问题,但是为什么呢？ < section>是否标签需要在脚本之前关闭吗？更有趣的是,这只是带有DateTimePicker脚本的页面上的问题.我有很多页面,这些页面具有相似且更复杂的脚本,没有任何问题.

解决方法:

您应该在DOM完成之后执行该代码.将您的代码封装在：

$(function () {
    // your code here
});

http://api.jquery.com/ready/

标签：javascript,jquery,asp-net-mvc-3,internet-explorer,internet-explorer-7
来源： https://codeday.me/bug/20191011/1893138.html