Pedir presupuesto

Actualizar un DIV sin recargar la página con jQuery

Hoy en día existen muchas páginas que van actualizando su contenido sin tener que recargarla dándole al botón de Actualizar.

Por eso me gustaría explicaros una manera fácil de conseguirlo gracias a las librerías javascript+ajax que existen en la actualidad y nos facilitan el trabajo.

Vamos a ver cómo actualizar una página con jQuery sin necesidad de recargarla.

En primer lugar, como en todos los casos de frameworks, tendremos que descargarnos la librería, en este caso, jQuery.

A continuación empezaremos por escribir el código.

  1. Creamos párrafo con el id «actualizar» donde llamaremos a un archivo PHP (este archivo podria ser una llamada a una base de datos, un mensaje, validación, cualquier cosa que puedas incluir en un archivo PHP).[html]

    Mi texto sin recargar

      recargar

    [/html]

  2. Incluiremos la librería jQuery que nos hemos descargado entre las cabeceras HEAD.[javascript]

    [/javascript]
  3. Añadimos el código Javascript para recargar nuestro DIV «actualizar».[javascript]

    [/javascript]

Con esto ya tenemos nuestro ejemplo para recargar la página. Puedes ver más información en el siguiente link –  jQuery – Actualizar un elemento sin recargar

Ejemplo: Actualizar elemento xon jQuery

¿Te ha gustado?, Comparte!!

Compartir en facebook
Compartir en twitter
Compartir en linkedin
Compartir en whatsapp
Compartir en email

10 comentarios

  1. Hola, mi nombre es Federico… he llegado a tu blog buscando y buscando… desesperado porque no le encuentro la solución a mi inconveniente.

    En la tarea de mi tesis para la facultad tengo que realizar un mapa con marcadores de diferentes tipos. Hasta ahora lo que hago es colocar el mapa y llenarlo de marcadores a través de un xml.

    Ahora se me plantea el inconveniente de acotar los marcadores a una fecha determinada, por ej. entre el 1 y el 15. La busqueda la hace perfecta y el xml esta bien, pero el problema es que no logro ese dinamismo entre el xml y el mapa con los nuevos marcadores acotados por fecha.

    Como hago para enviarle las fechas y que me devuelva el xml con los nuevos datos? y los remplace en el mapa sin recargarlo?
    Existirá alguna manera?

    Desde ya gracias
    desde Argentina!

    Federico

  2. Hola.. muy buen ejemplo, estoy tratando de implementarlo en mi página pero le segunda vez que lo ejecuto me sale el siguiente error cuando lo pruebo en IE8: Object doesn’t support this property or method

    Si alguien pudiera ayudarme… Gracias =)

  3. he probado tu codigo y funciona, pero el problema es que tengo un formulario con un select y al recargar me aparecen los imput pero el select pierde sus propiedades de , no se porque, me puedes ayudar?

  4. He usado tu codigo el cual es muy bueno, pero tengo un inconveniente y es que al momento de hacer que se actualice el div si bien no se refresca la pagina me lleva al inicio de la misma, es decir si mi div a actualizar esta el final de la pagina, al darle al link que me actualice el div me lleva al inicio de la pagina… pero si muestra el contenido cambiado

  5. me funciona exelente. pero tengo una duda..
    le agregue el codigo a un menu;
    como le puedo enviar una variable por ejemplo:

    var variable_post= $codigo»;
    $.post(«productos_familia.php»,

  6. Funciona muy bien, pero mi enlace queda hasta abajo de mi pagina y cuando doy click en enlace me sube el scrooll hasta la paerte de arriba, como puedo hacer para enfocarlo en el enlace?

    Utilice este: onload=»document.getElementById(‘cuerpo’).focus();» y el mismo pero cambioando onload por onclick

    Saludos

Deja una respuesta

Tu dirección de correo electrónico no será publicada.

¡Pide tu presupuesto!

Completa los campos para poder enviarte un presupuesto

Todos y tu presupuesto son a medida y totalmente personalizados, entendemos que dos proyectos online no pueden ser iguales y que cada cliente tiene unos objetivos y necesidades muy diferentes, es por eso que para elaborar un presupuesto, necesitamos saber de ti, tu proyecto y objetivos.

Los campos marcados con (*) son obligatorios.

La comunicación enviada quedará incorporada a un fichero del que es responsable COLORDEU. Esta comunicación se utilizará exclusivamente para tratar sus datos para atender su solicitud, siempre de acuerdo al Reglamento (UE) 2016/679 (RGPD), la Ley Orgánica 15/1999 (LOPD) y el Real Decreto 1720/2007 de desarrollo de la LOPD), sobre protección de datos. Sus datos no se comunicarán a terceros, excepto por obligación legal, y se mantendrán mientras no solicite su cancelación. En cualquier momento usted puede ejercer los derechos de acceso, rectificación, portabilidad y oposición, o si procede, a la limitación y/o cancelación del tratamiento, comunicándolo por escrito, indicando sus datos personales mediante un email a hola@colordeu.es