jquery datepicker ms ajax updatepanel no funciona después de la publicación

Entonces hice algunas lecturas de las preguntas relacionadas y tuve algunas cosas interesantes pero no encontré mi respuesta, al menos no entendí la respuesta.jquery datepicker ms ajax updatepanel no funciona después de la publicación

Soy muy nuevo en AJAX, javascript y en scripts de sclient en general.

He estado usando C# asp.net por un tiempo y recientemente agregué algunos paneles de actualización a mi lado para suavizar los controles de usuario y los bits que se actualizaban para que la página no se volviera a cargar cada vez. Todo funciona de manera brillante y estuve muy contento con él hasta que decidí probar y usar algo de JQuery.

He recogido el marcador de fecha de ui.jquery.js que es genial y funciona muy bien en una página normal. Mi problema llega cuando hago una devolución de datos desde dentro de un panel de actualización. El selector de fechas simplemente deja de funcionar.

según lo que he leído Necesito conectar manualmente esta copia de seguridad después de la publicación.

1) Realmente no entiendo por qué. en mi página maestra que tengo:

<script type="text/javascript"> 
    $(function() { 
     $(".mydatepickerclass").datepicker({dateFormat: 'dd-mm-yy'}); 
    }); 
</script>

que recoge mis cuadros de entrada con el mydatepickerclass asignado. y todo funciona ¿Por qué esto dejaría de funcionar en la devolución de datos?

2) ¿Cómo puedo solucionar esto ... cómo lo conecto para que después de una devolución de datos en un panel de actualización todavía funcione.

Entiendo que la identificación podría cambiar en una devolución de datos, creo que como estoy usando clases no sé lo que está pasando mal.

edición

he el código siguiente en mi usercontrol donde la actualización que está ocurriendo:

<asp:UpdatePanel ID="HistoryUpdatePanel" runat="server"> 
<ContentTemplate> 
    <%-- Start of Company History section --%> 
    <fieldset> 
     <legend>Activity History</legend> 

      <script type="text/javascript"> 
       $(function() { 
       $(".mydatepickerclass").datepicker({dateFormat: 'dd-mm-yy'}); 
       }); 
      </script>    

     <div> 
      <asp:ListBox ID="listBoxHistoryTypes" runat="server" SelectionMode="Multiple" AutoPostBack="true" OnSelectedIndexChanged="listBoxHistoryTypes_IndexChanged" /> 
      <label>Date From:</label><asp:TextBox class="mydatepickerclass" ID="txtdatefrom" runat="server" /> 
      <label>Date To:</label><input class="mydatepickerclass" type="text" /> 
      <asp:TextBox class="mydatepickerclass" ID="txtdateto" runat="server" /> 
      <asp:Button ID="btnFilterSearch" runat="server" Text="Filter Results" OnClick="btnFilterSearch_Click" /> 
     </div> 


    </fieldset> 
</ContentTemplate>

hace el script dentro del UpdatePanel no REWIRE ella?

Gracias

Jon Hawkins

Fuente

2009-02-06 Jon

el panel de actualización va a cargar el contenido del HTML. Tendrá que escuchar para UpdatePanel para completar y volver a crear el datepicker.

Aquí hay una muestra muy básica. Esto no tiene en cuenta los múltiples paneles de actualización en su página o las posibles pérdidas de memoria por no destruir adecuadamente su marcador de fecha.

Otra cosa a destacar cuando se mezclan ASP.NET Ajax y jQuery que tener cuidado porque el tanto utilizar el $ en diferentes contextos

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js"> 
    </script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); 

      function EndRequestHandler(sender, args) { 
       $('.mydatepickerclass').datepicker({ dateFormat: 'dd-mm-yy' }); 
      } 

     }); 
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 

    </div> 
    <asp:ScriptManager ID="ScriptManager1" runat="server"> 
    </asp:ScriptManager> 
    <asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
     <ContentTemplate> 
      <asp:TextBox ID="TextBox1" runat="server" CssClass="mydatepickerclass"></asp:TextBox> 
      <br /> 
      <asp:Button ID="Button1" runat="server" Text="UpdateMe" 
       onclick="Button1_Click" /> 
     </ContentTemplate> 
    </asp:UpdatePanel> 
    </form> 
</body> 
</html>

Fuente

2009-02-06 15:20:25 bendewey

¿cómo iba a ir sobre esto? – Jon

agregó una muestra. Te está concatenando. – bendewey

Funcionó con su sugerencia. Gracias. No lo entiendo, tendrá que investigar lo que ha dado pero gracias :) – Jon

Sé que este post es viejo - pero sólo coloque el selector de fechas jQuery fuera de la panel de actualización - debería funcionar al 100% ...

Fuente

2012-02-28 10:19:15 Mike

¡Eso es verdad! pero OP tiene un requisito. – Zerotoinfinity

Sé que esto es viejo pero ...intentan sustituir:

$(document).ready(function() {

con:

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function() {

Fuente

2012-04-24 15:17:33

Muchas gracias. ¡Me salvaste el tiempo –

lugar de hacer esto no es una alternativa simple.

En la devolución de datos del elemento de panel de actualización añadir este código

ScriptManager.RegisterStartupScript(Me, Me.GetType(), "asddas", "getjquerydate();", True)

Y esto en javascript

function getjquerydate() { 

$(".datepicker").datepicker({ 
    numberOfMonths: 2, 
    showButtonPanel: true, 
    minDate: 1, 
    dateFormat: 'dd/mm/yy', 
    showOn: "button", 
    buttonImage: "images/calendar.gif", 
    buttonImageOnly: true 
});

}

Después de devolución parcial del panel de actualización de nuevo llamar al selector de fechas función

Fuente

2013-05-21 07:00:09

$(document).ready(function() { 
     Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); 
     Sys.WebForms.PageRequestManager.getInstance().beginAsyncPostBack(); 
     function EndRequestHandler(sender, args) { 
      $('.mydatepickerclass').datepicker({ dateFormat: 'dd-mm-yy' }); 
     } 
    });

Puede hacer esto. en este caso, funcionará siempre;))

Fuente

2013-07-02 21:55:22

Sys.Application.add_load(LoadHandler); 

//This load handler solved update panel did not bind date picker after partial postback 
function LoadHandler() { 
    $(document).ready(function() { 
     $(".datepicker").datepicker({ 
      dateFormat: "M d, yy", 
      changeMonth: true, 
      changeYear: true, 
      onSelect: function (dateText, ubst) { your code here... } 
     }).val(); 
    }); 
}

Fuente

2014-06-17 17:10:19

Sé que es una publicación anterior, pero acabo de encontrarme con este problema y encontré la respuesta en este hilo. Espero que pueda ayudar a cualquiera que encuentre esto.

No puse ninguna secuencia de comandos del lado del cliente en el código. Solo puse este código:

 <script type="text/javascript">  
     Sys.WebForms.PageRequestManager.getInstance().add_pageL 
       Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); 

       function EndRequestHandler() { 
        $('.default-date-picker').datepicker({ 
         format: 'dd-mm-yyyy' 
        }); 
       } 

      }); 
      </script>

El código anterior debe estar dentro de la sección del cuerpo y no de la sección de la cabeza. Intenté ponerlo antes y después del administrador de scripts, o dentro y fuera del UpdatePanel y no encontré ningún problema con todas las opciones. Entonces, mientras este código esté en la sección del cuerpo, me funciona.

Solo asegúrate de cambiar tu clase datetimepicker definida. Para el mío es "selector de fecha predeterminado" en el archivo js.

Fuente

2015-07-31 03:07:19

"jQuery UI DatePicker no funciona después de ajax devolución parcial"

Coloque un gestor de guión y un panel de actualización en la página.

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

Ahora coloque un cuadro de texto y un botón dentro del control del panel de actualización.

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> 
<asp:UpdatePanel ID="upd1" runat="server"> 
<ContentTemplate> 
    <div style="font-family: Arial; font-size: small;"> 
     Select Date : 
     <asp:TextBox ID="txtDate" runat="server"Font- Names="Arial">   
     </asp:TextBox> 
    </div> 
    <asp:Button ID="btnAjax" runat="server" Text="Ajax PostBack" 
     OnClick="btnAjax_Click" /> 
    </ContentTemplate> 
</asp:UpdatePanel>

Ahora enlace el control datepicker con el cuadro de texto.

<script type="text/javascript" language="javascript"> 
$(document).ready(function(){  
    $("#<%=txtDate.ClientID %>").datepicker(
    { changeMonth:true, 
     changeYear:true, 
     showOn: 'button', 
     buttonText:'Show Date', 
     showAnim: 'fadeIn', 
     showButtonPanel: true, 
     dateFormat: 'DD, MM d, yy', 
     buttonImage: 'Images/imgCalendar.png', 
     buttonImageOnly: true 
    } 
    ); 
    $(".ui-datepicker-trigger").mouseover(function() { 
     $(this).css('cursor', 'pointer'); 
    }); 
}); 
<script>

Ahora cree un lado del servidor para hacer clic en el botón que causará una devolución de datos parcial de Ajax.

protected void btnAjax_Click(object sender, EventArgs e) 
{ 
    System.Threading.Thread.Sleep(1000); 
}

Al ejecutar la página, u vería algo como esto

Haga clic en selector de fechas. Se abre el marcador de fecha y la fecha seleccionada se convierte en valor del cuadro de texto. Ahora haga clic en el botón. Se hace clic en el botón del lado del servidor y ahora verá algo como esto.

botón

El planificador de evento es gone.So lo que hacemos ahora para hacer que funcione dentro de ajax. Vea el código a continuación.

<script type="text/javascript" language="javascript"> 
function pageLoad(sender, args) 
{ 
    $(document).ready(function(){  
    $("#<%=txtDate.ClientID %>").datepicker(
    { changeMonth:true, 
     changeYear:true, 
     showOn: 'button', 
     buttonText:'Show Date', 
     showAnim: 'fadeIn', 
     showButtonPanel: true, 
     dateFormat: 'DD, MM d, yy', 
     buttonImage: 'Images/imgCalendar.png', 
     buttonImageOnly: true 
    } 
    ); 
    $(".ui-datepicker-trigger").mouseover(function() { 
     $(this).css('cursor', 'pointer'); 
    }); 
    }); 
} 
</script>

pageLoad() función está disponible en JavaScript si está utilizando ASP.NET AJAX. Ajax Framework automáticamente cables hasta cualquier función de cliente llamado pageLoad() como un controlador Application.Load

Enlace fuente Créditos

http://www.jquerybyexample.net/2010/08/jquery-datepicker-does-not-work-after.html

Fuente

2016-12-30 19:00:33 Krishna

gracias! esto me ayudó ... –

jquery datepicker ms ajax updatepanel no funciona después de la publicación

Respuesta

Cuestiones relacionadas