javascript - 为什么这个DateTimePicker脚本会导致IE6和IE7无法加载页面

标签 javascript jquery asp.net-mvc-3 internet-explorer internet-explorer-7

我在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> 内呈现。标签。

要解决这个问题,只需将 form 分开即可。来自script所以我所做的就是在 @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 - 为什么这个DateTimePicker脚本会导致IE6和IE7无法加载页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12292649/

相关文章:

javascript - 加入 AngularFire 2

javascript - 单击时禁用右键单击菜单

asp.net-mvc - mvc 连接字符串问题

c# - 使用 MVC 3 以正确的方式在数据库中存储和检索文件

c# - 用于在 ASP MVC 中同时发布 Action 和 Script 的按钮

javascript - 如何在 Android 中远程更新我的 cordova/phonegap 移动应用程序?

javascript - highlight.js 不会自动检测语言

javascript - 如何使用 Javascript 从字符串中间提取文本?

jquery - Handsontable 保存公式值

javascript - 逗号分隔的 jQuery 选择器性能