MVC 4 Razor and Jquery UI datepicker() "Object doesn't support property or method"

▲
6
▼

I've probably just spent the last two hours trying to figure this out.

The specific error that is thrown with my MVC application is this: "0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'datepicker'"

Here is my code:

_Layout.cshtml:

<head>

...
<script type="text/javascript" src="../../Scripts/jquery-2.0.3.js"></script>
<script type="text/javascript" src="../../Scripts/jquery-ui-1.10.3.js"></script>
</head>

the view .cshtml

@{
    ...
    Layout = "~/Views/Shared/_Layout.cshtml";
}

...
<div>
    Change Time Span:
    <br />
    From:
    <input type="text" id="test" />
</div>

<div class="loading" id="container">@Model.LoadingMessage</div>

<script type="text/javascript">
    $(document).ready(function () {

        $('#test').datepicker();
    });

</script>

I've looked at several potential "duplicate" questions with no success. Here are some of the questions I've looked at:

MVC3 razor view error Microsoft JScript runtime error: Object doesn't support property or method 'datepicker'` jQuery giving error "Object doesn't support this property or method" on method datepicker Using datepicker in MVC 4.0 to persist a date value in db, throwing "object doesn't support this property or method"

  1. I believe I am referencing all that I need from jquery to accomplish my goal.
  2. The element is readable from Jquery, it can see its value were I to set it, so I don't think my selector is the problem.
  3. Both Jquery Packages were installed via NuGet (the latest Jquery release and the Jquery UI Combined Library)
  4. I've rebuilt / cleaned the Visual Studio solution (in desperation), shut down the local IIS host and reset it...

What am I missing? Intellisense even detects that the method exists and is giving me suggestions for what to place in for parameters.

Is there something simple I've missed?

jquery
asp.net-mvc
jquery-ui
razor
datepicker
asked on Stack Overflow Oct 16, 2013 by Porschiey • edited May 23, 2017 by Community

5 Answers

▲
13
▼

I found that by commenting out the "@Scripts.Render("~/bundles/jquery")" towards the bottom of _Layout.cshtml, I was able to resolve my issue with this.

answered on Stack Overflow Oct 30, 2013 by Caffeinius
▲
5
▼
Required scripts
----------------

<link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.9.1.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery-ui-1.10.0.js")" type="text/javascript"></script>



<p>Date:<input type="text" id="Dob" class="datefield" /></p>



<script type="text/javascript">
        $(document).ready(function () {
            $("#Dob").datepicker({
                changeMonth: true,
                changeYear: true
            });
        });
    </script>
answered on Stack Overflow Dec 27, 2013 by kavitha Reddy • edited Sep 28, 2018 by Kevin
▲
4
▼

Have you checked you haven't referenced JQuery twice? I found I'd included it in my layout and in my view. Removing one reference solved the problem.

answered on Stack Overflow Feb 9, 2014 by Eddie
▲
2
▼

Try this :

     <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

or this :

     <script" src="~/Scripts/jquery-ui-1.10.3.js"></script>

Instead of this :

   <script type="text/javascript" src="../../Scripts/jquery-ui-1.10.3.js"></script>
answered on Stack Overflow Dec 15, 2013 by Bashar Abu Shamaa • edited Aug 11, 2015 by Bashar Abu Shamaa
▲
1
▼

I had this issue when upgrading to jQuery 2. I was caught out by the change in folder structure within the jQuery download; the jquery-ui.js file was no longer located in a ui folder and therefore my script tag was incorrectly mapped.

So in short, double check your references are correct!

answered on Stack Overflow Jul 21, 2014 by shawad

User contributions licensed under CC BY-SA 3.0