Why does this DateTimePicker script cause IE6 and IE7 not to load page

问题

I have a few pages on a asp.net MVC 3 site that cause IE6 and 7 to prompt "Unable to load page" after loading the menu. I have been able to troubleshoot this down to the following DateTimePicker script:

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

I believe this is the error that it is throwing:

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

Now I have solved this issue, however I want to know why it is happening in the first place? Is it a bug in some versions of IE? I noticed that on one installation of IE7 if you install the standard updates the error goes away, and some people have said that they have had the error on IE8.

Basically this issue is that I have my MVC layout page that looks like this:

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

And the pages that have the issue contain something like this:

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

Followed by the above script. So the page with the script gets rendered inside the <section> tag.

To solve the issue all that needs to be done is to separate the form from the script so all i did was render the form in the @RenderBody() as seen below and the script in the @RenderSection("Scripts").

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

So this fixed the question but why? Did the <section> tag need to be closed before the script? More interestingly this is only a problem on pages with the DateTimePicker script. I have many pages with similar and more complex script that has no issues.

回答1:

You should execute that code after the DOM is completed. Encapsulate your code in:

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

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

来源：https://stackoverflow.com/questions/12292649/why-does-this-datetimepicker-script-cause-ie6-and-ie7-not-to-load-page

标签

javascript

jquery

asp.net-mvc-3

internet-explorer

internet-explorer-7