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.

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

You don't seem to be rendering ~/bundles/jqueryui, but only ~/bundles/jquery — Erik Funkenbusch
– Erik Funkenbusch, Commented Mar 20, 2013 at 22:35
I found that may be bootstrap working bad with jquery, sorry for my english. here is the link blogs.msdn.com/b/webdev/archive/2013/08/01/… — zeuz1983
– zeuz1983, Commented Mar 20, 2014 at 17:49

Smern · Accepted Answer · 2013-10-17 13:23:27Z

6

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!

edited Oct 17, 2013 at 13:23

Smern

19.1k22 gold badges77 silver badges93 bronze badges

answered Oct 17, 2013 at 13:07

barbara.post

1,68119 silver badges29 bronze badges

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

Comments

LockTar · Accepted Answer · 2013-03-20 22:54:31Z

1

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.

answered Mar 20, 2013 at 22:54

LockTar

5,5173 gold badges49 silver badges76 bronze badges

3 Comments

Brian Wetherell Over a year ago

I added @Scripts.Render("~/bundles/jqueryui") to the head (yeah, forgot that), but still nothing. I've also added it to the body, but that didn't work either. Odd thing is, no errors or warnings...

LockTar Over a year ago

Can you post your html or only the piece that should get the datepicker? Have you added the jQuery AFTER jQuery? Also try Ctrl + F5 for hard refresh.

LockTar Over a year ago

See for localization support for the datepicker my blog: locktar.wordpress.com/2012/09/10/localization-validation-in-mvc

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related