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

Question

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.

1. I have the latest JQuery (1.9.1), latest JQuery UI (1.10.2).

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"));
   

3. 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?!

Answer 1

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!

Answer 2

You made a bundle for jQuery ui but you havent set a reference in your page. Add a reference after your jQuery bundle reference and before creating the datepicker. have you set the datepicker as id or class? Now Your setting it as id. Use the class selector of jQuery if you had given Your textbox a datepicker class.