MVC4 jQuery UI does not work

asp.net-mvc jquery-ui asp.net-mvc-4 jquery-ui-datepicker

19,934

Solution 1

In the layout.cshtml view, move

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

from body to head and add in head too

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

Solution 2

I spent lots of time to figure out how to make it working.

Finally the steps are following:

Create ASP .NET MVC4 project Internet Application.

Clean some of the last lines of the _Layout.cshtml so it should look like this

<footer>
        <div class="content-wrapper">
            <div class="float-left">
                <p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application</p>
            </div>
        </div>
    </footer>

    @RenderSection("scripts", required: false)

Change header like I did here

 <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - My ASP.NET MVC Application</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        @Styles.Render("~/Content/css")
        @Styles.Render("~/Content/themes/base/css")
        @Scripts.Render("~/bundles/jquery")
        @Scripts.Render("~/bundles/jqueryui")
        @Scripts.Render("~/bundles/modernizr")
        <script type="text/javascript">
            $(document).ready(function () {
                // We will test DataPicker
                $('#datep').datepicker();
                // We will test TABS
                $(function () {
                    $("#tabs").tabs();
                });
            });
        </script>
    </head>

Delete all code after @section featured { section and add some html to Home/Index.cshtml

A. Put some code from the view source link of http://jqueryui.com/tabs/ page (It is inside of < div id="tabs" > ... < div >)

B. Add this

< div > Date: < input id="datep" type="text" / > < / div >

DONE!!!

enter image description here

Solution 3

Your code runs just fine in a fiddle: http://jsfiddle.net/m3QFL/

Check the console for errors and the path to your scripts. Chrome includes a console to help with js debugging or you can run FireFox and FireBug.

Either one will go a long way in helping you solve issues like this.

Also, hosted versions of jquery and jquery ui are available through jquery and jquery ui or Google. Here are yours:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>

<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>

jquery ui has links at the bottom of their homepage to their hosted versions.

BTW, the // instead of http:// allows the script to pick up the http prefix from the site. If you are on ssl it will pick up the https:// so you don't have secure and non-secure items on your page.

Solution 4

You will need to add a couple lines to your _Layout.cshtml to get jQuery UI working out of the box. First is the javascript bundle:

@*you should already have this line*@
@Scripts.Render("~/bundles/jquery")

@*add this line*@
@Scripts.Render("~/bundles/jqueryui")

Next you need the CSS for jQuery UI as well:

@*you should already have this line*@
@Styles.Render("~/Content/css")

@*add this line*@
@Styles.Render("~/Content/themes/base/css")

View more solutions

19,934

Author by

Petr

Updated on June 04, 2022

Comments

Petr almost 2 years

I cannot get jQuery UI working in my ASP.NET MVC4 application. I tried dialog and datepicker. Here is part of the code of my view.

<link href="../../Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script src="../../Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui-1.8.11.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
    alert('A');
    //$('#datepicker').val('test');
    $('#datepicker').datepicker();
    alert('B');
});
</script>
<h1>Test</h1>
<form id="testForm" action="#" method="get">
    <input type="text" id="datepicker" name="datepicker" class="datepicker" />
</form>

The alert A is displayed. When I uncomment the next row, the value test is assigned. But datepicker is not working and alert B does not display.

Thanks, Petr