jquery ui datepicker dentro de asp.net UpdatePanel

Question

Tengo una página web, donde estoy usando un jQuery UI datepicker en un cuadro de texto asp.net, que se encuentra dentro de un UpdatePanel. Aquí hay una descripción de lo que hago aproximadamente

<script type="text/javascript"> 
    $(document).ready(function() { $(".datepicker").datepicker(); }); 
</script> 

<asp:UpdatePanel ... > 
    ... 
    <asp:TextBox runat="server" CssClass="datepicker" /> 
    <asp:Button runat="server" /> 
    ... 
</asp:UpdatePanel> 

Cuando cargo la página por primera vez, todo funciona bien. Al hacer clic dentro del cuadro de texto, aparece el selector de fecha. Pero cuando hago clic en el botón y se ejecuta una devolución de datos asincrónica, el marcador de fecha ya no aparece cuando hago clic en el campo nuevamente.

Sé que el problema se debe a que UpdatePanel reemplaza completamente todo el contenido HTML cuando se actualiza, por lo que en realidad es un campo de texto nuevo que no se ha inicializado con la función datepicker.

Supongo que no debería usar $ (document) .ready() aquí para inicializar mis datapickers, pero ¿dónde es un buen lugar para colocar el código de inicialización? ¿O hay una forma en que puedo volver a disparar el código de inicialización después de una actualización de AJAX?

Answer 1

agregue el script, eso es lo que hago.

<asp:ScriptManager ID="ScriptManager1" runat="server"> 
</asp:ScriptManager> 

<script type="text/javascript"> 
    Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function(evt, args) { 
     $(".datepicker").datepicker(); 
    }); 
</script> 

Answer 2

Añadir este script al final de la página.

Reemplace la función initialize() con el código que desee ejecutar cada vez que haya una devolución de datos parcial desde un panel de actualización.

<script type="text/javascript"> 
    function pageLoad(sender, args) { 
     if (args.get_isPartialLoad()) { 
      initialize(); 
     } 
    } 
</script> 

Answer 3

Sustituye el nombre de clase '.datepicker' por el nombre del objeto dentro de la página.

Ejemplo:

<script type="text/javascript"> 
    $(document).ready(function() { $("#<%=DateTextBox.ClientID %>").datepicker(); }); 
</script> 

<asp:UpdatePanel ... > 
    ... 
    <asp:TextBox runat="server" ID="DateTextBox"/> 
    <asp:Button runat="server" /> 
    ... 
</asp:UpdatePanel>} 

Answer 4

$(document).ready(function() { 
     Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); 
     function EndRequestHandler() { $(".datepicker").unbind().mask("99/99/9999").datepicker() }; 
     $.getScript("../Scripts/jquery.maskedinput.min.js", function() { 
      $(".datepicker").mask("99/99/9999"); 
     }); 
     $.getScript("../Scripts/jquery-ui-1.11.3.min.js", function() { 
      $(".datepicker").datepicker() 
     }); 
    });