Why do I have to mess with @Script.Render to include scripts in HTML document

Question

It's been a nightmare to me before I came to know that in order to get jquery ui working in ASP.NET MVC I need to add @Scripts.Render("~/bundles/jqueryui"). Before doing so I kept getting Uncaught error: Undefined is not a function. What I did not understand was why on earth this would happen when I could see the jquery ui file in the sources when inspecting the html source. This is the _Layout.cshtml file:

    <!DOCTYPE html>
<html>
<head>
    <script src="~/Scripts/jquery-1.8.2.js"></script>
    <script src="~/Scripts/jquery-ui-1.8.24.min.js"></script>
    <link href="~/Content/themes/base/jquery-ui.css" rel="stylesheet" />
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
    <script src="~/Scripts/jquery.plugins.js"></script>
    <script src="~/Scripts/Helpers.js"></script>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
<body>
    @RenderBody()

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryui")//Added later to get it working
    @RenderSection("scripts", required: false)
</body>
</html>

In my Helper.js file I have some helper functions that I usually use. One of them is applyDatetimePickerAndFormat that is called on $(document).ready(). Inside that function I have the following code:

    $('.txt-date').datepicker({
    showAnim: "drop",
    changeMonth: true,
    changeYear: true,
    dateFormat: "dd.mm.yy"
});

If I omit @Scripts.Render("~/bundles/jqueryui") in the _Layout.cshtml I will get the aforementioned error. This code works perfectly with any plain html or web form. So it seems that somehow the document can't see the contents of the jquery-ui file. To make my question concrete:

When I look at the Sources of the the web page I can see jquery-ui-1.8.24.js and it's referenced in the html source. Then why can't the code find jquery-ui functions?
If every java script file has to be specified in the @Scripts.Render then why isn't there any problem with my Helper.js file?
And finally where does this ~/bundles/jqueryui path refer to?

Ans 2 Every js file does not to be specified to @Scripts.Render — Arijit Mukherjee
– Arijit Mukherjee, Commented Jun 20, 2014 at 10:50
Ans 1 : It should not as you mentioned its showing in the source as well — Arijit Mukherjee
– Arijit Mukherjee, Commented Jun 20, 2014 at 10:53

user3559349 · Accepted Answer · 2014-06-20 11:49:59Z

1

jquery-ui depends on jquery (i.e. it must be defined after jquery) but you have duplicated your files. In the head you have included <script src="~/Scripts/jquery-1.8.2.js"></script> followed by jquery-ui. You then reload jquery at the end of the file using @Scripts.Render("~/bundles/jquery") (Its now after jquery-ui).

Delete the script in the head and it should work. I addition, I recommend you delete jquery.validate and jquery.validate.unobtrusive from the head and use @Scripts.Render("~/bundles/jqueryval") at the end of the file (before @RenderSection..). You can examine these bundles in App_Start\BundleConfig.cs file. There are numerous advantages to using bundles (see Bundling and Minification).

If you are using all these files in every page based on _Layout, you can define your own bundle to includes all files.

answered Jun 20, 2014 at 11:49

user3559349

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

5 Comments

Mikayil Abdullayev Over a year ago

Deleting query.validate and jquery.validate.unobtrusive from the head and using Scripts.Render did really work. (I mean it still works) But deleting jquery and jqueryui from head and using Scripts.Render cause following errors: 1. jQuery is not defined 2. undefined is not a function

user3559349 Over a year ago

I've recreated your layout. With jquery and jqueryui in the head and @Scripts.Render("~/bundles/jquery") at the end, I get the error. If I remove ..("~/bundles/jquery") it works fine. But the recommended method is to delete the scripts from the head and use @Scripts.Render("~/bundles/jquery") followed by @Scripts.Render("~/bundles/jqueryui") at the end.

Mikayil Abdullayev Over a year ago

But why doesn't it work in my case. To repeat it again: I removed jquery and jqueryui from head and used scripts.Render for both of them.

user3559349 Over a year ago

I don't know what's in ~/Scripts/jquery.plugins.js or ~/Scripts/Helpers.js but they may be causing a problem if loaded before jquery and jquery-ui. Try putting then at the end and see if that solves the error.

Mikayil Abdullayev Over a year ago

Haha, I'll tell you why, because I moved jquery and jqueryui to the body and I use to jqeury in a file which I reference in the head the referencing file came before the referenced ones. That cause the problem. Thank you. Now it's all set.

Ihor Bats · Accepted Answer · 2014-06-20 12:24:24Z

0

You need to define the strategy for your js. I recomend you ot organize your js first and after that separate it to smaller parts. One should be common for all the pages(jQuery in your case) and other scripts for validation should be included only on pages that have some editing fileds etc.

Use DRY principle and read some information about how js works. It helps me a lot some time ago and won't take a lot of time.

answered Jun 20, 2014 at 12:24

Ihor Bats

1691 silver badge13 bronze badges

Collectives™ on Stack Overflow

Why do I have to mess with @Script.Render to include scripts in HTML document

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related