Blog Reacción Estudio

¡Tu zona de aprendizaje!

ajax

Cargar contenido a un Div con Ajax desde jQuery

Utilizando jQuery podemos cargar el contenido de un archivo en un div con unas pocas líneas de código.

Para ello primero tenemos que cargar la librería jQuery, podemos hacerlo utilizando la librería de Google:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

Y ahora creamos la función:

function cargarDiv(div,url)
{
	$(div).load(url);
}

“La variable div” es la referencia del DIV donde vamos a cargar el archivo.

Para utilizar la función hacemos lo siguiente:

cargarDiv("#contenido","archivo.php");

#contenido” como ya sabemos es el DIV donde cargará el contenido del archivo “archivo.php“.


  • Oski

    Deberian poner un ejemplo de como usarlo :/

  • Daniel

    la libreria librería jQuery va donde se carga el div o donde se escribe la funcion en js?

    • admin

      Así quedaría el documento HTML con los ejemplos de arriba:

      
      <html>
      
      <head>
      
      <title>El título de mi página</title>
      <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
      
      <script>
      
            jQuery.fn.cargar = function(url) {
                  $(document).ready(function(){
                        $("#contenido").load(url);
                  });
            };
      
            $(document).ready(function(){
      
                  $("#contenido").cargar("archivo.php");
      
            });
           
      </script>
      
      
      </head>
      
      <body>
      
            <div id="contenido"></div>
      
      </body>
      
      
      </html>
      
      
  • Christian Miranda

    Excelente, me ha funcionado de maravillas, pero al enviar contenido de otro pagina externa se me queda en el div y si ejecuto nuevamente se me queda el resultado anterior como hago para borrar la información del div, gracias

    • Alberto

      $(“#midiv”).html(“”);

  • Arnau

    Buena idea, crear funciones nuevas siempre es bueno.
    Una cosa, no seria mejor por eso que en vez de la línea:
    $(“#contenido”).load(url);

    Fuera:
    $(this).load(url);

    Lo digo porque así podrías reaprovechar el código con cualquier div o elemento, no importa que id tenga, por lo tanto podrías usarlo cómo bien has escrito:

    $(“#contenido”).cargar(“archivo.php”);
    o bien…
    $(“#info”).cargar(“archivo.php”);
    etc…

    Un saludo.

    • Alberto

      Se podría hacer como tú dices, pero he actualizado la función para que sea mucho más sencillo.

      Un saludo!

  • ADAIR ARAQUE

    excelente, tenia otra forma de hacerlo pero esta me funciono con bootstrap. gracias.

    function mostrarContenido(url){
    var contenedor;
    contenedor = document.getElementById(“contenedor”);
    $(contenedor).load(url);
    }

  • san

    Funciona de maravilla si la pagina php que se carga no tiene argumentos con ?arg=dato&arg2=dato2&… que se requiere o que me falta para que funcione.

  • Matias Sandoval Alarcon

    y si quisiera mantener el css del div que estoy cargando? como lo hago?

    • Alberto

      Para hacer eso tendrías que incluirlo de nuevo en el archivo que cargas con ajax.

  • Brayan Gutierrez Caicedo

    Tengo un problema, cuando cargo un .php que reproduce un vídeo y luego cargo otro .php en el mismo div, la conexión del vídeo aun esta como Keep Alive y sigue descargando.

    ¿Hay Alguna forma de detener esa descarga cuando cargue otro .php al div? Gracias de antemano.

  • Andrés de la Torre

    Hola, hace tiempo que se publicó esto, pero tengo una duda. Mi selector es un div que se carga con el DOM desde el principio, el cual tiene una serie de id y atributos data para hacer ciertas acciones con js. Bien, funciona perfecto al reemplazar el contenido, pero cuando carga el nuevo contenido ya no ejecuta las funciones, ni siquiera cuando vuelvo a cargar el contenido original. No entiendo qué sucede, lo único que se me ocurre es que no detecta el nuevo contenido que no inicia con el DOM. De qué manera podría solucionarlo? Saludos.

    • Andrés de la Torre

      Me respondo, creo que encontré algo al respecto… resulta que si es algo de lo que sospechaba. Cada que cambia el DOM se tienen que registrar event listeners para pos nuevos elementos, de modo que hay que recurrir a la delegación de funciones para corregir el detalle. Bueno, al menos descubrí que si tiene solución. Saludos.

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies.     ACEPTAR