ASP.net (Document).ready() failing to run

Question

I have an ASP.net MVC 4 web application (Visual Basic). On the _Layout.vbhtml shared view I have a small bit of javascript at the very bottom of the code designed to hide a loading div and display the main page content once everything has loaded.

Here is part of the .vbhtml file:

        <!-- JQuery & Javascript Loading -->
        @Scripts.Render("~/bundles/jquery", "~/bundles/jquerymain", "~/bundles/bootstrap", "~/bundles/lib", "~/bundles/gebo_dashboard")
        @RenderSection("scripts", required:=False)

        <!-- Close loading page -->
        <script type="text/javascript">
            $(document).ready(function () {
                //* show all elements & remove preloader
                alert("Hello Ready");
                setTimeout('$("html").removeClass("js")', 1000);
            });
        </script>
    </div>
</body>

And here is the produced html:

        <!-- JQuery & Javascript Loading -->
        <script src="/Scripts/jquery-1.7.1.js"></script>
        <script src="/Scripts/jquery/jquery.ui.touch-punch.js"></script>
        <script src="/Scripts/jquery/jquery.ui.totop.js"></script>
        <script src="/Scripts/jquery/jquery.easing.1.3.js"></script>
        <script src="/Scripts/jquery/jquery.debouncedresize.js"></script>
        <script src="/Scripts/jquery/jquery.cookie.js"></script>
        <script src="/Scripts/jquery/jquery.qtip.js"></script>
        <script src="/Scripts/jquery/jquery.colorbox.js"></script>
        <script src="/Scripts/jquery/jquery.jBreadCrumb.1.1.js"></script>
        <script src="/Scripts/jquery/jquery.actual.js"></script>
        <script src="/Scripts/jquery/jquery.imagesloaded.js"></script>
        <script src="/Scripts/jquery/jquery.wookmark.js"></script>
        <script src="/Scripts/jquery/jquery.mediaTable.js"></script>
        <script src="/Scripts/jquery/jquery.peity.js"></script>
        <script src="/Scripts/jquery/jquery.flot.js"></script>
        <script src="/Scripts/jquery/jquery.flot.pie.js"></script>
        <script src="/Scripts/jquery/jquery.flot.resize.js"></script>
        <script src="/Scripts/bootstrap/bootstrap.js"></script>
        <script src="/Scripts/bootstrap/bootstrap.plugins.js"></script>
        <script src="/Scripts/lib/jquery-mousewheel.js"></script>
        <script src="/Scripts/lib/antiscroll.js"></script>
        <script src="/Scripts/lib/fullcalendar.js"></script>
        <script src="/Scripts/lib/ios-orientationchange-fix.js"></script>
        <script src="/Scripts/lib/list.js"></script>
        <script src="/Scripts/lib/list.paging.js"></script>
        <script src="/Scripts/lib/prettify.js"></script>
        <script src="/Scripts/lib/sticky.js"></script>
        <script src="/Scripts/gebo/gebo_common.js"></script>
        <script src="/Scripts/gebo/gebo_dashboard.js"></script>

        <!-- Close loading page -->
        <script type="text/javascript">
            $(document).ready(function () {
                //* show all elements & remove preloader
                alert("Hello Ready");
                setTimeout('$("html").removeClass("js")', 1000);
            });
        </script>
    </div>
</body>

When I load up the page and view it in a browser, the $(document).ready function never fires and so leaves the loading div visible.

I have tested the script section by placing an alert outside of the $(document).ready function, both before and after and the alerts fire of exactly the way I'd expect them to. However the alert inside of the $(document).ready function never shows, indicating that the function never runs.

I have also tried using the pageLoad() function with no luck too.

Does anyone know why this refuses to work?

Answer 1

Ah, i've just found the issue. I've been porting a template into my ASP.net project and there was a single javascript error on the page according to Firebug. Not sure how I missed it, but solving the error has fixed the issue. :)