HTML page disappears when javascript is included above content_问答_开发者

I have an ASP.NET MVC 3 site that I'm trying to enable client-side validation on but I'm running into a really strange problem. The page loads and renders just fine until I include any javascript files. Once I do, any content below the script tag disappears completely. For example, this renders just fine (note the lack of a javascript include):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>@ViewBag.Title</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link href="/assets/css/style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div class="main">
            @Html.Partial("Header")
            <div class="clr"></div>
            <div class="body_resize">
                <div class="body">
                    <div class="left">
                        @RenderBody()
                    </div>
                    <div class="right">
                        @RenderSection("RightContent")
                    </div>
                    <div class="clr"></div>
                </div>
                <div class="clr"></div>
            </div>
            @Html.Partial("BottomSection")
            @Html.Partial("Footer")
        </div>    
    </body>
    </html>

This, however, causes the entire page to be blank (note the addition of the jQuery link tag in the HEAD section):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>@ViewBag.Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link href="/assets/css/style.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" />
</head>
<body>
    <div class="main">
        @Html.Partial("Header")
        <div class="clr"></div>
        <div class="body_resize">
            <div class="body">
                <div class="left">
                    @RenderBody()
                </div>
                <div class="right">
                    @RenderSection("RightContent")
                </div>
                <div class="clr"></div>
            </div>
            <div class="clr"></div>
        </div>
        @Html.Partial("BottomSection")
        @Html.Partial("Footer")
    </div>    
</body>
</html>

If I move the script link tag to the bottom of the page, it renders fine again, but I'm pretty sure I'm not getting access to the jQuery library. I tried adding this just above the script include (which is now at the bottom of the page):

<script language="javascript" type="text/javascript">
        <!--
        $(document).ready(function () {
            alert('test');
        });
        //-->
    </script>

My alert never fired.

So additionally, the same thing is happening in a separate Partial View:

<div id="formContainer">
    @using (Html.BeginForm())
    {
        <div class="tRightBoxMid tClear">
        <p style="padding:0;">
        Your Name&nbsp;&nbsp;@Html.ValidationMessageFor(m => m.Name)<br />
        @Html.TextBoxFor(m => m.Name, new { style = "width:275px" })<br />
        Your Email Address&nbsp;&nbsp;@Html.ValidationMessageFor(m => m.Email)<br />
        @Html.TextBoxFor(m => m.Email, new { style = "width:275px" })<br />
        Your Message&nbsp;&nbsp;@Html.ValidationMessageFor(m => m.Message)<br />
        @Html.TextAreaFor(m => m.Message, 4, 100, new { style = "width:275px" })<br />
        <input type="submit" class="formButton" value="Send Message" /><div id="msgSent" style="display:none;"><br /><br /><font color='green'><b>Message sent! A representative will be in touch with you shortly.</b></font></div>
        </p>
        </div>  
    }
</div>

<script type="text/javascript" src="/Assets/js/jquery.validate.min.js" />
<script type="text/javascript" src="/Assets/js/jquery.validate.unobtrusive.min.js" />

My client validation is never firing (note the includes at the BOTTOM -- page renders, but I'm not getting access to the included JS). If I move it to the top, the rest of my page loads, b开发者_如何学Gout this partial view disappears.

Long story short, any HTML that exists BENEATH a javascript include anywhere in my site seems to be disappearing and when I move the JS to the bottom, it's like it's not included at all. I've tried deleting all of the content from the various body and other sections to eliminate it, but it seems to be happening even when almost all markup and code is stripped out of the equation...anyone have any idea what's going on here?

try closing the script tag like this

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>

then try:

    <script language="javascript" type="text/javascript">

        $(document).ready(function () {
            alert('test');
        });

    </script>

Maybe try

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" ></script>

instead?

edit: dang, beaten.

You have to close the script tag

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>

It is because of the way you close the tag. Try this instead:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" ></script>

HTML page disappears when javascript is included above content

精彩评论

关注公众号

热门标签

图文推荐

HTML page disappears when javascript is included above content

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：