0x800a1391 - JavaScript runtime error: 'jQuery' is undefined

Question

I have a ASP .Net MVC4 Web application. In it I have my usual html for the _Layout.cshtml, which in turn loads the default Home/Index. All works fine.

In my index I am also loading a partial view. This works fine too. No probs.

I am using a the UI tools from the following site:

http://www.keenthemes.com/preview/index.php?theme=metronic

The problem is it seems to be primarily HTML4 and not designed for MVC out of the box so I am having to tweak it slightly to get it to work the way I want. (Nothing beyond anything very basic). For example, moving one part out to the index and using Renderbody() to load it so the actual html structure never changes. I have done this a million times to be sure I am not missing any closing tags or anything else that could cause my problem.

Up to this point there is no problem at all. Everything loads as it should.

I continued to create a 2nd View and its partial to extract other parts of the site. As usual, baby steps first. Before extracting any other code, I just used a little "Hello World" in the first page, and a similar string in the partial to be sure it was working. It was.

Now when I type in the url Home/ActionName the whole thing reloads as it should but looks horrible. and I get this error message:

0x800a1391 - JavaScript runtime error: 'jQuery' is undefined

Below is my code which clearly defines it:

<!-- BEGIN CORE PLUGINS -->
<script src="assets/plugins/jquery-1.8.3.min.js" type="text/javascript"></script>
<script>
    jQuery(document).ready(function ()
    {
        App.init(); // initlayout and core plugins
        _Layout.init();
        _Layout.initJQVMAP(); // init index page's custom scripts
        _Layout.initCalendar(); // init index page's custom scripts
        _Layout.initCharts(); // init index page's custom scripts
        _Layout.initChat();
        _Layout.initDashboardDaterange(); //Red date range
        _Layout.initIntro(); //Pop up messages
    });
</script>

It points me to the jQuery(document).ready part when I see the message.

Again, when I load the page normally, it works fine. When I type Home on its own it works fine. Its only when I type Home/AnythingElse that it gives this error message. Even if I type Home/ which should load in the Index file, it gives me this error message.

jQuery is defined, so why is this happening on postback?

Any help is appreciated.

Answer 1

Try setting the src for jQuery to be absolute from the site root:

<script src="/assets/plugins/jquery-1.8.3.min.js" type="text/javascript"></script>

Note the / before assets - when your src path does not start with a / the browser will try and load the asset relative to the current path, so in your example when you add the trailing slash to Home it will try to load jQuery from Home/assets/plugins/...

Answer 2

For me, the MVC bundlers were causing problems (in my case the ui bundler)

Here is the order which worked for me.

    <script src="/Scripts/modernizr-2.5.3.js"></script>
    <script src="/Scripts/jquery-1.7.1.js"></script>
    <script src="/bundles/jquery-ui"></script>
    <script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
    <script src="/Scripts/jquery.validate.js"></script>
    <script src="/Scripts/jquery.validate.unobtrusive.js"></script>