CODEWITHSUNDEEP
asp.net-mvcjquery-uiasp.net-mvc-4jquery-ui-datepicker
Petr
Petr

Reputation: 334

MVC4 jQuery UI does not work

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

Upvotes: 3

Views: 20066

Answers (4)

NoWar
NoWar

Reputation: 37633

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

Finally the steps are following:

  1. Create ASP .NET MVC4 project Internet Application.

  2. 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)

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

  1. 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

Upvotes: 4

Crake
Crake

Reputation: 1679

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

Upvotes: 2

Yuri Morales
Yuri Morales

Reputation: 2498

In the layout.cshtml view, move 

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

from body to head and add in head too 

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

Upvotes: 10

jk.
jk.

Reputation: 14435

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.

Upvotes: 2

Related Questions