Question

I have the following code in my _Layout.cshtml, targeted at a view once removed, through a layout nested one level below _Layout.cshtml.

<title>@ViewBag.PageTitle</title>
<link rel="icon" type="image/png" href="@Url.Content("~/Images/favicon.png")" />
<link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/Blueprint/screen.css")" media="screen, projection" />
<link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/Blueprint/print.css")" media="print" />
@Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.simple.css"))
@RenderSection("MainBodyStyling", false)
<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        debugger;
        //$("iframe").width($("iframe").contents().find("table").width());
    });
</script>

I cannot get the jQuery code to execute, in Chrome or Firefox 5.0, even just the debugger call. This is with jQuery 1.4.4, inside an MVC3 project. The code works when I paste it into both Firebug and Chrome JS consoles, so I know the code itself is not at fault.

CORRECTION: I added the erroneous document with quotes as a last ditch attempt. I had tried my default (I’m quite used to working with jQuery), $(function () { syntax, with no difference. The real problem is not my syntax, but correct code not executing. I have removed the quotes with no difference at all.

ADDENDUM: If I put a breakpoint on the debugger line, the code stops at the breakpoint in the Chrome console. I have no idea what this is about.

Answer 1

Put your scripts at the bottom of the document just before the closing body tag. This is non blocking and avoids any need for doc ready blocks. Double win.

Further reading from Yahoo and here by Dave Ward.