MVC3 C# datepicker (jquery) doesn't work on Ajax.BeginForm

Question

i'm working on a MVC C# proyect that has a datepicker inside a Ajax.BeginForm, but it doesn´t work !!! i've read and tried a lot of tutorials and answers but i can make it work !!! ... for testing i have made another page without the Ajax.BeginForm and it works !!! ... i really need help ... here is my code ...

in the _Layout i have this ...

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script>

<link href="@Url.Content("~/Content/themes/base/jquery.ui.core.css")" 
    rel="stylesheet" type="text/css" />
<link href="@Url.Content("~/Content/themes/base/jquery.ui.datepicker.css")" 
    rel="stylesheet"  type="text/css" />
<link href="@Url.Content("~/Content/themes/base/jquery.ui.theme.css")" 
    rel="stylesheet" type="text/css" />

<script src="@Url.Content("~/Scripts/jquery.ui.core.min.js")" 
    type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.ui.datepicker.min.js")" 
    type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/DatePickerReady.js")" 
    type="text/javascript"></script>

this is my dateview

@model Nullable<DateTime>
@{
DateTime dt = DateTime.Now;
if (Model != null)
{
   dt  = (System.DateTime) Model;

}
@Html.TextBox("", String.Format("{0:d}", dt.ToShortDateString()), new { @class =       "datefield", type = "date"  })
} 

this is my actual jscript, like i said i tried a lot, but whith this work on the test page, it´s on the file DatePickerReady.js

$(function () {
$(".datefield").datepicker();
});

this is te code from the ajax.beginform

@using (Ajax.BeginForm("Index_AddItem", new AjaxOptions { UpdateTargetId = "TicketList", OnSuccess = "FFecha" }))
{ @Html.ValidationSummary(true)

and finally this is where i use the datepicker, this code works on my test but it doesn't work on the Ajax.BeginForm

<div class="editor-label" style="Display:block; width:300px; float:left">
            @Html.LabelFor(model => model.Ticket.Fecha)
<br />
</div>
<div class="editor-field">
            @Html.EditorFor(model => model.Ticket.Fecha)
            @Html.ValidationMessageFor(model => model.Ticket.Fecha)
</div>

i dont'n think that the model has something wrong, but here is the code ...

    [Required(ErrorMessage = "Required")]
    [DataType(DataType.Date)]
    public DateTime Fecha { get; set; }

... i really apreciate any help !!!

Answer 1

It appears that you are not including the base jQuery script, which jQuery UI depends on. You need to include it before the jQuery UI scripts in the _Layout.