MVC4 and datepicker: "0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'datepicker'"

Question

MVC4 and datepicker: "0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'datepicker'"

I have an MVC application that gives the above error. the application defaulted to referencing jquery-1.8.2.js in the Scripts folder. With NuGet, I added jquery-ui-1.11.4.js.

Here are the relevant code sections:

BundleConfig.cs:

public static void RegisterBundles(BundleCollection bundles)
    {
        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"));
    }
}

}

_Layout.cshmtl:

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
@Styles.Render("~/Content/css")
@Styles.Render("~/Content/themes/base/css")
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")
<script src="@Url.Content("~/Scripts/FloatingDiv.js")"></script>

And the view where the datepicker lives:

@using (Html.BeginForm())
{
<div class="container">
    <div class="left-third">
        <label for="Company">Company:</label>
        @Html.DropDownList("Company")
    </div>
    <div class="middle-third" style="padding-left:20px">
        <label for="StartDate">Start Date:</label>
        @Html.TextBox("StartDate", null, new { @class = "datefield input-box" })
    </div>
    <div class="right-third" style="padding-left:20px">
        <label for="EndDate">End Date:</label>
        @Html.TextBox("EndDate", null, new { @class = "datefield input-box" })
    </div>
</div>
<br />
<br />
<br />

<div style="width:100%;text-align:center">
     <input class="button" type="submit" value="Generate Report" />
</div>
}
<script type="text/javascript">
$(function () {
    $('.datefield').datepicker();
});

I have tried referencing the scripts with a script tag and using the @Url.Content function for all the various scripts, for example:

<script src="@Url.Content("~/Scripts/jquery-ui-1.11.4.js")"></script>

I have tried the "Networking" tab of the developer tools (F12) in IE to ensure that the scripts were loaded, and they are with a result of 200. I did notice that the

@Styles.Render("~/Content/themes/base/css")

didn't render in the networking tab. I don't know if that is relevant, but I think it just comes with the

@Styles.Render("~/Content/css")

I tried moving the script references around and the datepicker method around to no avail.

I sincerely hope one of you smart guys or gals will know what to do about this.

javascript

jquery

asp.net-mvc

asp.net-mvc-4

datepicker

asked on Stack Overflow Apr 12, 2016 by

M. Kirk Jennings

1 Answer

As nearly all of you surmised, I was doing something wrong.

I made a new project and used the @Scripts.Render to add the appropriate jquery-1.8.2.js and jquery-ui.1.8.24.js that are included with the MVC4 project and they worked fine. I did have to move the Render to the top underneath @Scripts.Render("~/bundles/modernizr").

I then went back to the original project, uninstalled jquery-ui-1.11.4.js with the NuGet Package Manager that I had mistakenly installed earlier, and manually copied the jquery-ui-1.8.24.js files and CSS sheets from the new test project to the old solution. Then, knowing that multiple copies of the script would bollix things up, I searched in the master page for 'jquery.' To nobody's surprise, there was the reference to the original file just above the </body> tag. I removed it, made sure all the bundles were referencing the correct files, that the files were there and there were no duplicates again, and everything works fine.

Thanks for putting up with my idiocy.

answered on Stack Overflow Apr 13, 2016 by

M. Kirk Jennings • edited Jun 6, 2016 by

marc_s

User contributions licensed under CC BY-SA 3.0