lunes, 27 de febrero de 2012

Jquery no funciona despues de refrescar UpdatePanel

jquery-logo_pngProbablemente has llegado hasta este post porque has padecido el problema que el título de este post describe
Tienes alguna funcionalidad que usa la librería Jquery, y todo funciona de maravilla, bueno casi todo…
resulta que al actualizar sólo el UpdatePanel (no toda la página), de pronto ya no funciona la funcionalidad que dependía de la librería Jquery…
No menciono qué funcionalidad específica… porque puede tratarse de cualquier funcionalidad… pero que use la librería Jquery.

Y por qué no funciona? qué es lo que ha pasado?
Ocurre que esta actualización asíncrona del UpdatePanel ha separado el control de la funcionalidad que inicialmente se le asignó cuando usamos
$(document).ready(){ ………. }
entonces es necesario volver a enlazarlos.
Y esto se debe a que document.ready sólo se ejecuta una vez, y es al terminar de cargarse la página.
Por lo tanto, lo que tenemos que hacer es reemplazar el document.ready por la función PageLoad de ASP.NET AJAX, algo así:
<script type="text/javascript">
  $(document).ready(function(){
    ………………………
    ………………………
  });
</script>
este extracto de código javascript debería quedar así:
<script type="text/javascript">
  function pageLoad(){
    ………………………
    ………………………
  }
</script>
La explicación más simple es que la función pageLoad de ASP.NET AJAX se ejecuta nuevamente cada vez que el updatepanel se refresque también… y por lo tanto para este caso, es todo lo que necesitamos.
Y esta simple modificación solucionará el asunto.

Espero que les sea de utilidad Guiño

12 comentarios:

Rocio dijo...

Hola! estoy dando mis primeros pasos con asp y jquery y me he encontrado con este problema pero algo distinto, en mi caso, lo que tengo que refrescar es un gridview, el problema que tengo es que la fuente de datos del grid va cambiando y para que esos cambios se reflejaran en el navegador puse en el page_load un
grid.DataSource=col;
grid.DataBind();
ademas metí el grid en un update panel con un timer cada 3000ms, la cosa es que todo me funcionaba correctamente es asp “basico” pero al meterle jquery ya no me refresca el contenido del grid, he comprobado con logs que no refresca la pagina, por lo que solo actualiza el grid cuando yo lo hago manualmente con F5 desde el navegador, se te ocurre alguna alternativa para que pueda forzar el refresco de la pagina? no me importaria refrescar la pagina completa porque apenas tiene un textbox y el grid, pero no se si es posible, o si hay alguna forma de refresco que me funcione con jquery.
Espero que me puedas echar una mano!!
Gracias!

Segundo Serrano dijo...

Hola Rocio,

no se me ocurre qué puede estar pasando para que tu código no funcione... pero con este retazo de código javascript puedes refrescar tu página..

function pageLoad()
{
setInterval("location.reload(true)", 3000);
}

Saludos

Felix Hernandez dijo...

Muy bueno tu aporte me ha sido de mucha ayuda. Gracias.

Unknown dijo...

hola, tengo un problema y no estoy seguro si esa misma solucion me puede ayudar: dentro de un updatepanel hay tres tabPanel, en el tercero hay un link que carga una tabla dentro de ese tab, pero no se muestran los datos. Al darle click al segundo tab y volver al tercero y nuevamente dar click en el link que muestra la tabla ya si se muestran los datos...podría ser el mismo problema de actualización? Gracias :)

Marcos dijo...

Muchas gracias Segundo, exactamente tenia ese problema y se me ha solucionado con el pageload.
Gracias again

julio anyosa dijo...

Gracias, ya casi tiro la tolla por no encontrar la solución

Unknown dijo...

A mi me pasa lo siguiente, yo tengo un datepicker desde un dialog,la primera vez que lo levanto el datepicker funciona pero cuando lo vuelvo a levantar me muestra el calendario pero no me pone la fecha en el input

Unknown dijo...

Muchas gracias por el aporte me estaba volviendo loco no entendia que pasaba, había usado bastante el datapicker en php pero al usarlo en asp.net me he encontrado con el problema que describes, tu solución ha funcionado perfectamente

Unknown dijo...
Este blog ha sido eliminado por un administrador de blog.
Alex Malm dijo...

Muchas gracias, me estaba dando de tumbos por ese problema

CONALEP Guanajuato dijo...

GRACIAS VIEJO! Funciona perfecto :) había buscado mucho el origen del problema y no lo comprendía

FABIAN dijo...

Buen aporte, funciona!