DatePicker gives Object doesn't support property or method 'datepicker' in full view but NOT in Modal form

Question

DatePicker gives Object doesn't support property or method 'datepicker' in full view but NOT in Modal form

In case the title gets cut off, I am receiving the following error: 0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'datepicker'

The datepicker works fine in a Modal form returned as a PartialView, but it throws that error when trying to use it in a full View outside of a Modal/PartialView.

Bundle.Config:

public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
        "~/Scripts/jquery-2.2.0.js",
        "~/Scripts/bootstrap.js",
        "~/Scripts/bootstrap-datepicker.js")
        );

        bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
        "~/Scripts/jquery-ui-1.11.4.js",
        "~/Scripts/bootstrap-datepicker.js")
        );

        bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
            "~/Scripts/jquery.validate*",
            "~/Scripts/jquery.unobtrusive*"
                ));

        bundles.Add(new StyleBundle("~/bundles/css").Include(
            "~/Content/bootstrap.css",
            "~/Content/bootstrap-theme*",
            "~/Content/jquery-ui.css",
            "~/Content/jquery-ui.structre.css",
            "~/Content/jquery-ui.theme.css"

            ));

        bundles.Add(new StyleBundle("~/bundles/themes/base/css").Include(
            "~/Content/themes/*.css"
            ));

        bundles.Add(new StyleBundle("~/bundles/datepickers/css").Include(
            "~/Content/bootstrap-datepicker.css",
            "~/Content/themes/base/datepicker.css"
            ));
    }

Admin Layout (Where the form should fall under):

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - Boxer Puppy Dogs Admin</title>

@*<script src="~/Scripts/jquery-2.1.4.min.js" type="text/javascript"></script>
<script src="~/Scripts/jquery-ui-1.11.4.min.js"></script>
<script src="~/Scripts/modernizr-2.6.2.js"></script> 
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />*@ 

<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Content/Admin.css" rel="stylesheet" type="text/css" />

@Styles.Render("~/bundles/css")
@Styles.Render("~/bundles/themes/base/css")
@Styles.Render("~/bundles/datepickers/css")
@RenderSection("styles", required: false)    
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jqueryui")
@RenderSection("scripts", required: false)

Main Layout (to keep things relatively consistent)

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - Boxer Puppy Dogs</title>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="~/Scripts/modernizr-2.6.2.js"></script>

@*<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />*@


@Styles.Render("~/bundles/css")
@Styles.Render("~/bundles/themes/base/css")
@Styles.Render("~/bundles/datepickers/css")
@RenderSection("styles", required: false)
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jqueryui")
@RenderSection("scripts", required: false)

Modal Partial View:

@model BoxerPuppyDogs.Models.ManageLitters.LitterViewModel

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

@Html.BeginForm("SaveNewLitter", "ManageLitter", FormMethod.Post, new { @id = "newLitterForm" })
{
<div class="modal fade" id="NewLitterDialog" tabindex="-1" role="dialog" aria-labelledby="RemoveModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Add Litter</h4>
            </div>
            <div class="modal-body">
                <div id="DialogPlaceHolder">
                    @Html.Partial("_NewLitterFormFields", Model)
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>
}

Full View version:

    @model BoxerPuppyDogs.Models.ManageLitters.LitterViewModel

@{
    Layout = "~/Views/Shared/_AdminLayout.cshtml";
    ViewBag.Title = "Add Litter";
}

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


<div class="container">
    <div class="row">
        @Html.BeginForm("SaveNewLitter", "ManageLitter", FormMethod.Post, new { @id = "newLitterForm" })
        {

        @Html.Partial("_NewLitterFormFields", Model)
    </div>

    <div class="row">
        <button type="button" class="btn btn-default">Cancel</button>
    </div>

    }
</div>

Both the Modal and Full view call this Partial:

    @model BoxerPuppyDogs.Models.ManageLitters.LitterViewModel

<script type="text/javascript">
    $(document).ready(function () {
        $("#LitterDOB").datepicker({
            changeMonth: true,
            changeYear: true,
            dateFormat: 'mm/dd/yy',
            gotoCurrent: true
        });
    });
</script>


<div class="row">
    @Html.LabelFor(m => m.LitterDOB)
    @Html.TextBoxFor(m => m.LitterDOB, String.Format("{0:MM/dd/yyyy}", Model.LitterDOB), new { id = "LitterDOB", @class = "datepicker" })
</div>

I originally tried using EditorFor and creating a custom template for this, but that proved obnoxious and I only need this on one control so it's not really necessary at this point.

There's got to be some difference between the Modal and View that call the Partial, but I can't see it.

javascript

jquery

jquery-ui

datepicker

jquery-ui-datepicker

asked on Stack Overflow Jan 26, 2016 by

Don Sartain

1 Answer

The problem was that I had

@RenderSection("scripts", required: false)

in the head section of the Layout instead of at the bottom of the Body section.

answered on Stack Overflow Jan 27, 2016 by

Don Sartain

User contributions licensed under CC BY-SA 3.0