CODEWITHSUNDEEP
jqueryasp.net-mvcjquery-uirazordatepicker
Porschiey
Porschiey

Reputation: 2241

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

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?

Upvotes: 6

Views: 38420

Answers (5)

kavitha Reddy
kavitha Reddy

Reputation: 3333

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>

Upvotes: 5

Bashar Abu Shamaa
Bashar Abu Shamaa

Reputation: 2029

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>

Upvotes: 2

shawad
shawad

Reputation: 355

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!

Upvotes: 1

Eddie
Eddie

Reputation: 429

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.

Upvotes: 4

Caffeinius
Caffeinius

Reputation: 131

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.

Upvotes: 13

Related Questions