c# - jquery datepicker ms ajax updatepanel no funciona después de la publicación posterior
asp.net-ajax (8)
Entonces hice algunas lecturas de las preguntas relacionadas y tuve algunas cosas interesantes pero no encontré mi respuesta, al menos no entendí la respuesta.
Soy muy nuevo en AJAX, javascript y scripting lateral 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.
Recogí el datepicker 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.
por 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 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, pero como estoy usando clases no sé qué está pasando mal.
editar
Tengo el siguiente código en mi usercontrol donde está ocurriendo la actualización:
<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>
¿El script dentro del panel de actualización no lo reconecta?
Gracias
Jon Hawkins
el panel de actualización va a volver 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 tener en cuenta al mezclar ASP.NET Ajax y jQuery tenga cuidado porque ambos usan $ 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>
Sé que esta publicación es antigua, pero solo coloque su jquery datepicker fuera del panel de actualización, debería funcionar al 100% ...
En lugar de hacer esto, hay una alternativa simple.
En la devolución de datos del elemento en el panel de actualización, agregue 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 la devolución de datos parcial en el panel actualizado, vuelve a llamar a la función datepicker
$(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'' });
}
});
Puedes hacer esto en este caso, funcionará siempre;))
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();
});
}
Sé que esta es una publicación anterior, pero me encuentro 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 pongo 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 en 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 definida de datetimepicker. Para el mío es "selector de fecha predeterminado" en el archivo js.
"jQuery UI Datepicker no funciona después de la devolución de datos parcial de Ajax"
Coloque un administrador de scripts 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 crea 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, verás algo como esto
Haga clic en datepicker. Se abre el marcador de fecha y la fecha seleccionada se convierte en valor del cuadro de texto. Ahora haz clic en el botón. Se hace clic en el botón del lado del servidor y ahora verá algo como esto.
El botón datepicker ya no está. Entonces, ¿qué hacemos ahora para 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>
La función pageLoad () está disponible en JavaScript si está utilizando ASP.NET ajax. AJAX framework conecta automáticamente cualquier función del lado del cliente llamada pageLoad () como un controlador Application.Load
Créditos de enlaces de origen
http://www.jquerybyexample.net/2010/08/jquery-datepicker-does-not-work-after.html
Sé que esto es viejo, pero ... intente reemplazarlo:
$(document).ready(function() {
con:
Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(function () {