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 🙂

HTML5 placeholder to replace jQuery watermark

HTML5 PlaceHolder:

With the introduction of HTML5 we have an option which is basically the replacement of manually created watermarks for textboxes and input texts. It is a very simple way of presenting watermark, below is a clear example:

<input type=”text” placeholder=”Enter Name Here”/>

Watch Live Demo Here

 

Replacing Jquery Watermark:

For an example of jQuery Watermark, please view an older post explaining how to Create a textbox watermark using css and jquery

 

The Difference:

Watermark text dissappears as soon as the mouse click event is fired, while when using html5 placeholder the text dissappears as soon as you start typing. Will not state which is better since it is a matter of personal preference…
Thanks and Enjoy 🙂