[ASP.NET] Update Panel y jQuery juntos es posible

Hola a todos, este es un post que quería hacer hace rato, y pues en los últimos días estuve varios comentarios de Cristian en un post anterior (filtrar gridview con jQuery), así que Cristian con este post te contesto, en resumen el problema radica en que cuando se tiene un updatepanel y se realiza alguna actualización las funcionalidades que se han implementado con jQuery se pierde, y esto ocurre simplemente porque al utilizar el updatepanel la página no se carga normalmente, y esto si es necesario para jQuery.

Para dar un ejemplo pensemos que tenemos una página en la cual tenemos un updatepanel, y allí dentro unos tabs, los cuales son creado gracias a jQuery UI, entonces la primera vez que se carga la página tenemos algo como:

Imagen1

Algo muy sencillo, lo interesante es que tenemos un botón, y cuando damos click en el botón lo que tenemos es que se realiza una actualización parcial de la página, lo cual hace que nuestros tabs dejen de funcionar Triste:

Imagen2

Y lamentablemente se han perdido los tabs… pero ahora vamos a la solución la cual realmente es muy sencilla, lo único que debemos utilizar en este caso es la Microsoft Ajax Library, y en el momento en que se termina la renderización parcial debemos volver a llamar el script que crea los tabs o los scripts que estemos utilizando:

   1:  <script type="text/javascript">
   2:          Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endReq);
   3:          function endReq(sender, args) {
   4:              $("#divTabs").tabs();
   5:          } 
   6:  </script>

Lo importante es que no olviden referenciar la librería Microsoft Ajax, en el ejemplo encontrarán el archivo correspondiente, y lo otro importante es que el código anterior debe ir dentro del body.

Espero les sea de mucha utilidad el ejemplo, les dejo el ejemplo para su descarga, hasta un próximo post!

Descargar el ejemplo!

You may also like...

21 Responses

  1. Jorge Ramirez says:

    Alguna vez yo tuve un problema similar pero con paginas que heredaban de un MasterPage, asi pues tenia un plugin de jquery que debia modificar el alto de dos columnas en todas las paginas hijas del MasterPage, el problema que se expone aqui era el mismo y una solucion que encontre fue colocar un UpdatePanel “vacio” al final del MasterPage de la siguiente manera:

    Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

    De esta manera como explica Julio, cuando suceda un postback siempre se ejecutara una funcion de javascript llamada EndRequestHandler, funcion que tendra en su cuerpo las acciones que esperamos deban realizarce siempre.

  2. Hola Julio,
    Antes que nada, mil gracias por el articulo, pero tengo un pequeño problema cuando visualizo la pagina del ejemplo que descargué en Internet Explorer 9!
    Mira esta imagen:

    http://sdrv.ms/L5uU3R

    Y el detalle del error que está en el cuadro de dialogo es:
    “Línea: 61
    Error: No se puede obtener valor de la propiedad ‘PageRequestManager’: el objeto es nulo o está sin definir”.

    Realice las pruebas en Chrome y Firefox y funciona sin problemas, solo se presenta con internet explorer ….

    Mil gracias !

    • Hola Cristian, q raro, yo lo probe en IE9 y me funciono correctamente, asegurate que el código JavaScript este en el body, de todas maneras lo voy a revisar..

      Cuentame como te va

      • Hola Julio !
        Me esta pasando lo mas extraño de este mundo con nuestro querido Visual Studio 2010 !
        Resulta que el error me sale únicamente cuando tengo como navegador predeterminado el “Internet explorer”; es decir, que si tengo como explorador predeterminado el Google Chrome y visualizo la pagina en internet explorer ahí si me ejecuta sin problemas :/
        Es muy raro y casi que no me doy cuenta del por que del problema,
        He reiniciado varias veces mi equipo por si alguna cosa, pero Plop !! sigue igual ….
        No se que hacer, voy a consultar y si encuentro algo de relación o de sentido en esto que me está pasando (aunque no creo) les cuento !

        De resto la función de JQuery con el UpdatePanel funciona perfecto (incluso cuando se usa en paginas hijas de una MasterPage ) :D

        Un saludo julio y muchas gracias por tus artículos, ojalá te animes a seguir posteando cosas así de útiles !!!

        • uy Cristian q vaina tan rara, pero bueno ya sabras q dw todo se ve en el mundo del.desarrollo, lo bueno es q si te funciona.. si encuentras algo del tema q bacan si lo compartes..

          y claro seguire compartiendo de lo poco q se..

          Saludos!

    • sAnt0s says:

      hola buen dia, no se si ya resulviste tu problema conn el ie9, ando buscando un problema que tengo con los tabs que cuando realiao una acción al cargar se muestra de nuevo el primer tab y no en el que estaba, pero bueno eso es otra cosa dado mi busqueda encontre lo que te paso y si mal no recuerdo a mi tambien me sucedio, de tal manera que llege a desinstalar el ie9, pero bueno ya de tanto rollo lo unico que ise fue presionar el boton de “vista de compatibilidad” y adios error todo bien, bueno espero te sea de ayuda. yo sigo tratando de resolver mi problema.

      • hola, lo normal es q se te devuelva al primer tab, pq cuanod la página se recarga de nuevo el código javascript se vuelve a ejecutar, debes propveer una manera de almacenamiento del tab q esta trabajando el usuario y luego dejarlo ubicado en el cual estaba trabajando.

        Saludos

  3. cristian says:

    Ninguna de las dos formas me funciono, estoy haciendo lo de quicksearch de jquery…. alguna idea???

  4. Rocio says:

    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!

    • Hola Rocio, bueno, tendria q revisar bn como tienes implementando tu caso, pero si lo q quieres hacer es hacer un postback lo que puedes hacer es hacerlo ocn javascript, lo haces asi: __doPostBack(”,”);

      Cualquier cosa me cuentas, saludos!

      • Rocio says:

        Hola Julio! gracias por tu respuesta, te puedo enviar el codigo fuente si quieres en un mail y asi te explico mas en detalle cual es mi caso, ¿donde tendria que poner el doPostBack? en la parte de arriba del aspx entre tags de script?

  5. Elizabeth says:

    Excelente tu aporte a la comunidad me ayudo demasiado gracias!!!!

  6. Javier Miranda Hernandez says:

    Muchas gracias me ayudaste con mi proyecto de tesis. saludos !!!!

  1. June 19, 2012

    [...] [ASP.NET] Update Panel y jQuery juntos es posible [...]

  2. December 19, 2012

    [...] [ASP.NET] Update Panel y jQuery juntos es posible [...]

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Follow

Get every new post on this blog delivered to your Inbox.

Join other followers: