ASP.NET MVC jQueryUI datepicker no funciona cuando se utiliza AJAX.BeginForm

Question

Tengo una vista parcial de ASP.NET MVC que contiene un Html.TextBox que está configurado para usar el datepicker de JQueryUI. Esto se hace asegurando que el estilo esté configurado para .datepicker. Todo esto funcionó bien. Sin embargo, he cambiado mis formularios a Ajax.BeginForm e incluí un Ajax.ActionLink que lo muestra después de hacer clic en el enlace. Desde agregar esto, el marcador de fecha no se muestra. De hecho, ningún JavaScript que funcionó anteriormente ahora se invoca incluso después de devolver una vista parcial desde el controlador. Incluso si PONE EL JavaScript/JQuery en la vista parcial en sí mismo, aún no lo usa. Realmente estoy confundido, ¿alguien puede ayudarme?

ejemplos mostrados a continuación

<div id="claims"> 
     <div id="divViewClaims"> 
      <% Html.RenderPartial("ViewClaim", Model.Claims ?? null); %> 
     </div> 
     <br /><br /> 
     <div id="claim"> 
      <% Html.RenderPartial("AddEditClaim", new Claim()); %>   
     </div> 
    </div> 

Enlace de acción, cuando clickon llama Acción controlador para volver PartialView, La JavaScript llamada sobre los incendios onSuccess pero nada más, que anteriormente estaba conectado por la función document.ready. Todos mis scripts están en archivos separados y referenciados en la página maestra.

<%= Ajax.ActionLink(string.Format("Add A{0} Claim", Model.Count > 0 ? "nother" : string.Empty), "AddClaim", "Driver", new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "claim", OnSuccess="showAddClaim" }, new { @class = "ControlLink" })%> 

Acción controlador

public ActionResult AddClaim() 
{ 
     return PartialView("AddEditClaim", new Claim()); 
} 

Vista parcial, que muestra el cuadro de texto con el estilo establecido en selector de fechas

<% var ajaxOptions = new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "divViewClaims", InsertionMode = InsertionMode.Replace, OnSuccess="hideAddClaim" }; %> 
     <% using (Ajax.BeginForm("AddEditClaim", "Claim", ajaxOptions, new { @name = "ClaimControl", @id = "ClaimControl" })) 
      { %> 

    <fieldset> 
     <legend><%= Model.Id==0?"Add":"Edit" %> Claim</legend> 
     <p> 
      <label for="Title">Claim Date</label> 
      <%= Html.TextBox("Date", Model.Date.ToString().TrimEnd('0', ':', ' ') ?? "", new { @class = "datepicker" })%> 
     </p> 

Agradezco cualquier ayuda en esto.

Answer 1

Si el elemento se crea después de document.ready, debe volver a hacer coincidir el elemento con jQuery.

Salida jQuery Live

Answer 2

Lo que funciona para mí es el uso de la propiedad de los OnSuccess AjaxOptions. Por lo tanto, el código podría ser así:

using (Ajax.BeginForm("AddEditClaim", "Claim", ajaxOptions, new { @name = "ClaimControl", @id = "ClaimControl", OnSuccess="the_javascript_function_below" }) 

donde the_javascript_function es el nombre de una función que hace esto:

$(".datepicker").datepicker();