asp.net mvc4 jquery not working

Question

I'm trying to run a jquery code which was put in my _Layout.cshtml as below:

...............
<script type='text/javascript'>
$(document).ready(function () {
   alert('Test');

});
</script>
  @Scripts.Render("~/bundles/jquery")
  @RenderSection("Scripts", required: false) 
</body>
</html>

The above code wasn't fired and when I inspected with Chrome Dev, it showed $ is not defined ( I can see all my jquery, jquery ui files are loaded )

It worked if I put this code in an external js file

I don't mind putting all my jquery code in external files, but really wanna clarify where I am doing wrong.

You are asking for jquery functions before you load the jquery library. — Aristos
– Aristos, Commented Aug 29, 2012 at 8:37
Ideally you should render scripts in the header part of your layout so any jquery on any of your pages will work. — Justin
– Justin, Commented Aug 29, 2012 at 17:26
Ideally all JavaScript should go into it's separate file and then it would have loaded just fine because your custom scripts are set to render in the layout right after jquery. — DtechNet
– DtechNet, Commented Feb 16, 2017 at 0:03

NunoCarmo · Accepted Answer · 2012-08-29 08:41:56Z

26

You need to introduce jquery before your script.

@Scripts.Render("~/bundles/jquery")

<script type='text/javascript'>
$(document).ready(function () {
   alert('Test');

});
</script>

  @RenderSection("Scripts", required: false) 
</body>
</html>

answered Aug 29, 2012 at 8:41

NunoCarmo

5,5092 gold badges21 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

davidcoder Over a year ago

Thanks, it worked. I used to put all my jquery libraries in header section, but according to my research recently, it's a good practice to put them before the closing body tag </body>

angularsen Over a year ago

I'm confused. Most of what I read is you should always put jQuery script import at the end for better performance, which is exactly what ASP.NET MVC4 does by default. But I have never been successful in using jQuery this way, I always need to import jQuery at the start of the document in order for it to work. Is there something I am missing?

user426364 Over a year ago

@AndreasLarsen: yes (you are missing something), microsoft markets themselves to management NOT to programmers, therefore when programmers adapt to subpar implementations, the problem is considered solved.

user1462933 · Accepted Answer · 2012-12-08 19:57:54Z

9

Andreas, i have the same issue.. for default the "_layout.cshtml" has "@Scripts.Render("~/bundles/jquery")" at the end of the document, but it doesn't work.. i cut it and paste it in the head and now it is working.

answered Dec 8, 2012 at 19:57

user1462933

1,2093 gold badges14 silver badges24 bronze badges

Comments

DanKodi · Accepted Answer · 2013-12-29 16:03:49Z

8

In order for jQuery to work, your script should come after <script src="/Scripts/jquery-2.0.3.js"></script>

In the _Layout.cshtml, just before the </body> tag you can find something like this

@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)

First you have the jQuery library. Then you have any scripts. That's what this means. So in your views do something like this.

@section scripts{
 //your script
}

This will make sure that all scripts comes under jQuery reference.

answered Dec 29, 2013 at 16:03

DanKodi

3,70031 silver badges27 bronze badges

1 Comment

DeveloperDan Over a year ago

I forgot to wrap jQuery with @section scripts{} in my .cshtml view leading to the "jQuery not defined" error. It's a simple fix for a confusing error. Thanks.

Collectives™ on Stack Overflow

asp.net mvc4 jquery not working

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related