MVC 4.0 jquery object has no method “”

In order to help you understand the reason for this post, I will explain my initial situation. I was using .NET MVC 4.0 with razor and I needed to use some jquery plugins. I tried fancybox, tagsinput, etc etc and each plugin kept on failing to work do the error similar to “$().fancybox is not a function”. After some reseach and attempts to fix this issue, I realised that jquery was loading twice, not because I referenced it twice.

I initially looked at the _layout.cshtml page and saw that css and modernizer are being rendered by razor but since I did not see the rendering of jquery I added my own jquery reference. However razor was rendering jquery at the very bottom of the _layout.cshtml and thus jquery was being referenced twice, making plugins unusable. Razor uses the follow render syntax to reference jquery at the bottom of the page:

@Scripts.Render(“~/bundles/jquery”)

To fix either remove your reference at the top or if like me you have used normal jquery such as $(document).ready() etc, you will need the reference at the top and not at the bottom. In that case either remove the render from the bottom, or just drag it all the way to the head of the page.

Hope this helped 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s