JQueryUI DatePicker won't work in my ASP.NET MVC 2 application

Question

I'm just trying to set up an input with datepicker and I'm getting the following error: "Object doesn't support this property or method".

I downloaded the JQueryUI without a theme and there is my head section of the master page:

<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.4.1.min.js" type="text/javascript" />
<script src="/Scripts/jquery-ui-1.8.5.custom.min.js" type="text/javascript" />
<asp:ContentPlaceHolder ID="ScriptContent" runat="server" />

After that, I created an input text inside a partial view (that remains inside a view):

<input type="text" id="txtDataIda" />

And at the beggining of this partial view:

$(function() { $("#txtDataIda").datepicker(); });

When I open the page, the error is shown and the datepicker won't work. I suppose I must be doing something wrong since I've never got the chance to work with JQueryUI before.

Thanks in advance!

Answer 1

You should go to http://jqueryui.com/download and build a custom download with the features that you want. Then, just reference the 2 files (jquery-1.4.2.js, jquery-ui-1.8.5.custom.min.js) in the "js" folder and not all of the files in the "development-bundle" folder. Then, you don't have to worry about multiple files conflicting. I have a feeling that the .widget, .datepicker, and 1.8.custom files may be conflicting. But, if it's all in one custom file, then you don't have to worry about that.

Or if you're not using any other ui features, you could try referencing only the jquery-1.4.2.js, ui.core.js, ui.datepicker.js files to see if that works without conflict.

And, of course, double check that you've put the references in the correct master page that is being used.

Answer 2

Fixed! The JQuery wasn't being loaded, because the script tag was self closing. When I changed it to , it worked, as bizarre as it seems. Thanks!