Uncaught TypeError: Cannot set property 'unobtrusive' of undefined

Question

I am using the latest MVC framework and bundles.

The default "jqueryval" bundle that MVC creates is causing a javascript error

The scripts on my page are output like so

<!-- In head -->
<script src="/Scripts/modernizr-2.6.2.js"></script>
<script src="/Scripts/jquery-2.0.2.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="/Content/Misc.js"></script>


<!-- Bottom of doc -->
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>

My Bundle:

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
         "~/Scripts/jquery.validate*",
         "~/Scripts/jquery.unobtrusive*"));

What is going wrong?

Flo

If order is a problem, create a bundle per script file and load them in the code in the order you want. – Jotunheim

I thought that may have been it, but when manually putting in it makes no difference – Flo

This is probably a dumb question, but did you actually include jQuery on your page as well? It seems to be referring to the object being undefined, and that object should be jQuery. – Yean

Yes :D Dumb questions appreciated (you never know!) lol – Flo

Can you post all of JS references from your HTML output. You might be missing something else. – Jotunheim

It looks like the correct files aren't being output. Don't you need jquery.validate.js and jquery.validate.unobtrusive.js (in that order)? Why is jquery.unobtrusive-ajax.js being output? I think validate.unobtrusive needs validate – Yean

Fair point, if you look at my updated answer though shouldnt the Bundle be outputting those too? – Flo

Thats it! Somehow the files were lost during a recent merge! THanks – Flo

@Flo Hmm yeah it seems so (I have like no actual experience with .NET bundling, by the way). I guess my point is that the problem is that the correct JS files aren't being outputted, so the validate.unobtrusive file doesn't have the code it needs. So it's not a problem of order - it's a problem of getting the right files in the bundle. I'll see what I can find. You might want to change your question to address this problem, so others may be able to help better – Yean

@Flo Awesome, glad we got to the bottom of it! I added an answer to summarize what we found :) – Yean

Answer 1

In your bundle, you set it to include jquery.validate* and jquery.unobtrusive*, which would normally work. But if you look at your output, not all files that should be there are there. The point is that jquery.unobtrusive.validate requires jquery.validate to be included (which, as you can see, is not, by your output). Apparently, the files aren't actually available in your project, and therefore aren't found by the bundler. Make sure to have all necessary files in your project so your bundler can find them and output them.

Yean

Answer 2

I found that replacing the wildcards with full js script name worked.

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
            "~/Scripts/jquery.validate.min.js",
            "~/Scripts/jquery.validate.unobtrusive.min.js"
            ));

Homo