JQuery UI not working in MVC 4 after Scripts.Render?

asp.net-mvc-4, jquery

Solution

I had the exact same problem, bouncing my head until I came across this for a solution : http://forums.asp.net/t/1879457.aspx

In short :

- styles should be rendered using @Styles.Render in page head.

- only jquery bundle is to be included in page head (using @Scripts.Render), at least in my code.

- all other scripts (jquery again, jquery UI etc) should be rendered using @Scripts.Render in page body just before the closing body tag...

The page ends with such a code :

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

     @Scripts.Render("~/bundles/jqueryval")
     @Scripts.Render("~/bundles/modernizr")
     @RenderSection("scripts", required: false)
 </body>

And so I got jquery IU working!

Problem

Not sure what the problem is here. I've read some of the other solutions and tried to use them, but nothing seems to be working. All I want to do is render a datepicker. I've done it many times before, just not sure if I'm having a brain malfunction because I've been in "crunch" time for the last few weeks, or what. - I have the latest JQuery (1.9.1), latest JQuery UI (1.10.2). I've checked the BundleConfig, and all seems well: ``` bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Scripts/jquery-{version}.js")); bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include( "~/Scripts/jquery-ui-{version}.js")); bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include( "~/Scripts/jquery.unobtrusive*", "~/Scripts/jquery.validate*")); // Use the development version of Modernizr to develop with and learn from. Then, when you're // ready for production, use the build tool at http://modernizr.com to pick only the tests you need. bundles.Add(new ScriptBundle("~/bundles/modernizr").Include( "~/Scripts/modernizr-*")); bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css")); bundles.Add(new StyleBundle("~/Content/themes/base/css").Include( "~/Content/themes/base/jquery.ui.core.css", "~/Content/themes/base/jquery.ui.resizable.css", "~/Content/themes/base/jquery.ui.selectable.css", "~/Content/themes/base/jquery.ui.accordion.css", "~/Content/themes/base/jquery.ui.autocomplete.css", "~/Content/themes/base/jquery.ui.button.css", "~/Content/themes/base/jquery.ui.dialog.css", "~/Content/themes/base/jquery.ui.slider.css", "~/Content/themes/base/jquery.ui.tabs.css", "~/Content/themes/base/jquery.ui.datepicker.css", "~/Content/themes/base/jquery.ui.progressbar.css", "~/Content/themes/base/jquery.ui.theme.css")); ``` I've set up _Layout.cshtml header: ``` @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr") @Scripts.Render("~/bundles/jquery") <script> $(function () { $("#datepicker").datepicker(); }); </script> ``` And then added another Scripts.Render("~/bundles/jquery") in the body. Yet when I add the datepicker, nothing happens...I just get a textbox. I have also tried: - manually adding in the script reference in the header - adding in the jquery script reference as provided in the jquery ui demo (the url) nothing...and I mean NOTHING is working. I've double checked my file paths, and they are correct...what am I missing?!

Original source