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

Posted on Actualizado enn


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!

About these ads

19 comentarios en “[ASP.NET] Update Panel y jQuery juntos es posible

    Jorge Ramirez escribió:
    06/12/2012 en 22:36

    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.

      Jorge Ramirez escribió:
      06/12/2012 en 22:40

      Perdon por el mensaje anterior, no salieron los tags HTML, aqui dejo el codigo completo: http://pastebin.com/pquEc1Pu

      Julio Avellaneda respondido:
      06/12/2012 en 22:44

      Gracias Jorge, si realmente trabajar con el updatepanel tiene sus cosas diferentes, y en algunas ocasiones trabajarlo junto a con codigo JavaScript es algo canson, pero tu solucion esta buena!

    Cristian Pérez escribió:
    06/13/2012 en 13:00

    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 !

      Julio Avellaneda respondido:
      06/13/2012 en 13:04

      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

        Cristian Pérez escribió:
        06/13/2012 en 16:51

        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 !!!

        Julio Avellaneda respondido:
        06/13/2012 en 17:37

        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 escribió:
      06/26/2012 en 09:29

      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.

        Julio Avellaneda respondido:
        06/29/2012 en 13:49

        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

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

    cristian escribió:
    11/20/2012 en 14:50

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

    Rocio escribió:
    12/11/2012 en 03:31

    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!

      Julio Avellaneda respondido:
      12/11/2012 en 09:29

      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 escribió:
        12/12/2012 en 03:19

        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?

        Julio Avellaneda respondido:
        12/12/2012 en 08:52

        Hola, claro, enviamelo, mi correo es julito_gtu[@]hotmail.com… si quieres agregame al msn/facebook y hablamos

    Resumen Post 2012 « Todo en ASP.NET escribió:
    12/19/2012 en 22:05

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

    Elizabeth escribió:
    04/14/2014 en 19:59

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

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s