jQuery UI not working with ASP.NET MVC3 partial views

I was playing with ASP.NET MVC3 (RC2) and I couldn’t get jQuery UI’s datepicker to work for me in a partial view. It would always say datepicker is not a function.

It took me a while to figure out the problem is.

Firstly I was referencing jQueryUI’s css and jQuery UI in my layout page


_Layout.cshtml:

<head>
 <title>@ViewBag.Title</title>
 <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
 <link href="@Url.Content("~/Content/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />
 <script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
 <script src="@Url.Content("~/Scripts/jquery-ui.min.js")" type="text/javascript"></script></head>

Then, at the bottom of my partial view I was calling datepicker like so:

Job.cshtml:
<div>
    @Html.LabelFor(model => model.DueDate)
</div>
<div>
    @Html.EditorFor(model => model.DueDate)
    @Html.ValidationMessageFor(model => model.DueDate)
</div>
<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        $("#DueDate").datepicker();
    });
</script>

The problem was I didn’t notice that the MVC scaffolding had added a reference to jQuery to the top of my partial view. This reference to jQuery was wiping out the earlier reference to jQuery UI in layout page.

Job.cshtml:
@model JobSystem.Web.Models.Job

<script src="@Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

The solution was to remove the reference to jquery in my partial view (Job.cshtml).

I also decided to remove the reference to jQuery UI from the layout page (_Layout.cshtml) and add it to the partial view (Job.cshtml).

Advertisements

5 thoughts on “jQuery UI not working with ASP.NET MVC3 partial views

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s