Tupale

Como recargar un el contenido de un Div usando jQuery

jQuery

jQuery

Este va a ser un tutorial corto, mas bien un tip de como recargar contenidos usando jquery sin tener que recargar la pagina, ademas de ser algo útil para mejorar el diseño de nuestro sitio es por lo general el primer uso que le damos a jquery para luego entrar con cosas un poco mas hardcore. Entendiendo básicamente que es jQuery y su funionamiento podras explorar mas de sus posibilidades y herramientas.

Se darán cuenta de lo fácil que es usar jQuery y del ahorro de código que este representa, al poder apoyarse en todas las transiciones y funciones que esta librería trae predeterminada.

Bueno para comenzar, siendo Jquery una librería de Javascript lo primero que debemos hacer es vincularla a nuestra pagina o sitio web, podemos usar tres opciones diferentes:

  • Repositorio de la libreria de Google
    https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
  • Repositorio de la libreria de jQuery
    http://code.jquery.com/jquery-1.7.2.min.js
  • Descargar la libreria jQuery
    http://jquery.com

Vamos a suponer que decidiste descargar los archivos de jQuery y montarlos en tu servidor, de manera que le primer paso sera vinculas el archivo de la librería en tu web.  Solo deberas colocar esta linea de codigo en tu <head>…</head>.

<script src=”jquery.min.js”></script>

Teniendo en cuenta colocar la ruta correcta a tu archivo jquery.min.js

Bien ahora pasaremos a crear el div que queremos cambiar, en este caso lo voy a llamar “contenido”.

<div id=”contenido”> Aquí mi contenido</div>

Y solo tendremos que crear una simple función de javascript y jQuery que recargue el contenido del div:

function cambiarcont(pagina) {
$(“#contenido”).load(pagina);
}

En el ejemplo anterior se crea la función cambiarcont() con la variable “pagina”, dentro de la funcion encontramos una sentencia de jQuey que buscara el objeto #contenido y aplicara load(pagina) es decir que cargara la pagina que le digamos.

Para embellecer un poco mas la función le he colocado un fadeout y un fadein para que se vea agradable la transición.

function cambiarcont(pagina) {
$(‘#contenido’).fadeOut(1000);
$(“#contenido”).load(pagina);
$(‘#contenido’).fadeIn(1000);
}

Ahora creamos el enlace que llama a esta función:

<a href=”javascript:cambiarcont(‘otrapagina.html’);”>Cambia a otra pagina</a>

Y como ven, en el enlace estoy indicando que pagina sera la que se va a cargar dentro del div.

16 comments for “Como recargar un el contenido de un Div usando jQuery

  1. isidro
    17 septiembre, 2012 at 11:52 PM

    Este escript me ha interesado mucho, pero no me funciona. La estructura me quedo como sigue:

    function cambiarcont(pagina) {
    $(“#contenido”).load(pagina);
    }
    function cambiarcont(pagina) {
    $(‘#contenido’).fadeOut(1000);
    $(“#contenido”).load(pagina);
    $(‘#contenido’).fadeIn(1000);
    }

    Cambia a otra pagina

    Aquí mi contenido

    Por favor podria ayudarme a resolver este caso

    • 28 septiembre, 2012 at 7:52 PM

      podrias publicarlo en alguna parte para poder revisar mas minusiosamente tu código?

  2. David
    2 octubre, 2012 at 10:36 AM

    Muchas gracias por el tutorial, muy bueno pero no me funciona en chroome

    • 2 octubre, 2012 at 12:09 PM

      Asegurate que el archivo que estas cargando exista. Si el problema continua publicalo en alguna parte para poder ver tu sitio y encontrar el problema.

  3. 5 octubre, 2012 at 12:41 AM

    Por favor ayuda ya logre eso de cargar una pagina en un DIV pero quisiera hacer algo mas, Me explico cargo en un DIV una pagina que tiene un formulario que sera llenado por un usuario hasta ahi todo genial, pero cuando el usuario llena el formulario y presiona el boton se debe abrir una pagina de exito, quisiera que esta pagina de exito se abra tambien en el DIV en el que se abrio la pagina del formulario. Como hago eso actualmente la pagina de exito se abre aparte. Trabajo con jquery con el codigo del tutorial de arriba por favor si alguien sabe … 🙂

    • 5 octubre, 2012 at 12:41 PM

      En este caso lo que debes hacer es no utilizar el formulario de una manera convencional, una forma de hacerlo es eliminar la propiedad action de la etiqueta form y en el boton de envio submit agregar una propiedad onClick llamando a un javascript que se encargue de procesar tus datos, en teoría es casi el mismo codigo con el que se cambia el contenido del div, pero en este caso también deber sacar la información de los campos del formulario y hacer algo con ella.

      También puedes buscar otros métodos, lo que básicamente buscas es como enviar formularios por Ajax.
      http://www.desarrolloweb.com/articulos/recibir-procesar-formulario-ajax-php.html

  4. Valeria
    18 octubre, 2012 at 1:24 PM

    Hola Kalvin, muy bueno tu código, pero no logre que funcione, tienes alguna página en funcionamiento que utilize este código o algún ejemplo que pueda descargar?
    Gracias!

  5. Jose
    18 mayo, 2013 at 12:22 PM

    Tienen que instalar wanserver para poder visualizar este script.

  6. Jhon
    2 marzo, 2014 at 3:10 PM

    Este script es mejor
    function cargar(div,desde)
    {
    $(div).fadeOut(1000);

    setTimeout(function(){
    $(div).load(desde);
    }, 1000);

    $(div).fadeIn(1000);
    }

  7. 20 mayo, 2014 at 5:18 PM

    Hola Kalvin, gracias… Me funciona pero adicionalmente estoy haciendo uso de JQuery Mobile y manejo unos temas CSS al tratar de cargar la página externa no me hereda los estilos. El div principal donde muestro el contenido lo tengo definido así:

    Prueba

    El llamado que hago en Jquery lo hago asi:

    $(“#contenido”).fadeOut(1000);
    $(“#contenido”).html(“Cambio Pagina“);
    $(“#contenido”).fadeIn(1000);

    pero no me sale el botón redondeado como debe ser, sino me sale la palabra Cambio Pagina como un simple link.

    Que puedo estar haciendo mal o tienes un ejemplo que maneje en jquery mobile.

  8. Milton
    7 septiembre, 2014 at 11:38 PM

    Casi me voy sin dejarte las gracias amigo, está muy bueno, aunque al principio no quería funcionar en Chrome.

  9. carlos
    18 mayo, 2015 at 3:05 PM

    amigo porque sera que me funciona en firefox pero en Chrome no??

  10. Joselo
    9 junio, 2016 at 3:39 PM

    con está funcion load podría cargar una tabla html php que contiene datos mysql, cosa que tengo un formulario y debajo la tabla cuando inserto en el formulario con ajax sin recargar ese contenido se acople a la tabla de abajo?

    • 29 julio, 2016 at 5:47 PM

      El contenido se va a actualizar cada vez que cargues la opciones load de jquery, pero si quieres que se actualice automaticamente cada X tiempo puedes usar set_interval de javascript.

Deja un comentario

A %d blogueros les gusta esto: