feed twitter facebook LinkedIn facebook

jQuery » Cargar un fichero con jQuery

Enero 25, 2009 por Víctor Cuervo . 8567 visitas 13 Comentarios Imprimir Imprimir

Ya están lejos los tiempos dónde un site de Internet estaba compuesto solo por páginas estáticas HTML. Ahora la mayoría se componen en los servidores, mezclando información, ficheros, datos almacenados,... Si bien podemos tener la necesidad de tener dinamismo en la carga de datos de la parte cliente. Para ello, jQuery nos dará la capacidad de cargar un fichero de forma dinámica.

Lo primero que tenemos que hacer es crear un fichero HTML de test. Este lo llamaremos test.html. Ahora pasamos a crear la página que nos permite cargar un fichero con jQuery. En esta, lo primero que vamos a hacer es cargar la librería jQuery.

  1. <script type="text/javascript" src="jquery.js"></script>

Como en la mayoría de las ocasiones utilizamos la función ready para esperar que se cargue la página. Dentro de la función ready será donde insertemos nuestro código jQuery.

  1. $(document).ready(function(){
  2. $("#carga").click(function() {
  3. // Código
  4. });
  5. });

Vemos que el código que nos va a permitir cargar un fichero con jQuery se lo asociaremos al evento click de un elemento que llevará el ID carga. Por ejemplo, pondremos un botón...

  1. <button id="carga">Cargar fichero</button>

Además añadiremos una capa, a la cual daremos el ID texto, sobre la cual cargaremos el fichero HTML.

  1.  
  2. <div id="texto"></div>
  3.  

Ya solo nos quedará cargar el fichero. Para ello utilizamos la función .load(), a la cual pasamos el nombre del fichero a cargar. En nuestro caso el fichero test.html

  1. $("#carga").click(function() {
  2. $("div#texto").load("test.html");
  3. });
Visualizar el Codigo
Visualiza el artículo
Descargar el Codigo
Descargar el código
Error en el Codigo
Error en el código
Foro sobre jQuery
Foro sobre jQuery
tags: , , , , , ,

Artículos relacionados:

13 comentarios »

Redifusión RSS de los comentarios de la entrada. TrackBack URI

1 2
  1. Luis Garrido
    Abril 3, 2009 #

    Hola te queria agradecer por el codigo, me sirvio de mucho, lo modifique para poder cargar paginas distintas desde un menu.

  2. MiguelMich
    Abril 15, 2009 #

    Muy buen TIP en realidad muy simple de usar y nos quita muchos dolores de cabeza… aquí os dejo un bonito efecto de fade al cargar las páginas:

    $(document).ready(function(){
    $(“#carga”).click(function() {
    $(“div#texto”).hide().load(“test.html”).fadeIn(“slow”);
    //Le damos efecto
    });
    });

    Salu2

  3. Luis Garrido
    Abril 15, 2009 #

    Bueno esta es la modificacion que realice

    function cargalapagina(pagina){
    var paginacargada = pagina;

    $(“div#derecha”).load(paginacargada);

    }

  4. roberto
    Marzo 20, 2011 #

    que pena molesarlos con esta pregunta, intento cargar este ejemplo en browsers como google chrome y opera y no me funciona ¿por que pasara esto?

  5. miguelmich
    Marzo 21, 2011 #

    Y te funciona en algún otro navegador?

    si te funciona en algún otro es bueno que coloques el código que estás usando para ver en donde está el posible error

  6. Miguel
    Agosto 10, 2011 #

    Hola, yo tengo el mismo problema que Roberto, es justamente con el evento load(), funciona bien en safary, firefox, internet explorer pero no corre en google chrome.

    la manera en la q cargo la pagina es la tradicional

    $(function(){
    $(“#contenedor”).load(“pagina.html”);
    });
    hay alguna otra manera de cargar para q funcione en todos los navegadores por iwal?

  7. MiguelMich
    Agosto 10, 2011 #

    Intenta esto

    $(document).ready(function(){

    $(“#contenedor”).load(“pagina.html”);

    });

  8. Miguel
    Agosto 10, 2011 #

    No MiguelMich, acabo de probarlo y no funciona…

    tengo entendido q $(function() es lo mismo q poner $(document).ready(function() pero de forma abreviada.

    gracias por el intento..

  9. Fantastic Sams Coupons
    Octubre 14, 2011 #

    Great Clips Printable Coupons…

    [...]the following are a handful of web page links to places which we connect to since we believe there’re truly worth visiting[...]…

  10. Miguered
    Noviembre 8, 2011 #

    sip, pero no tenemos un fundido de salida y no encuentro manera de meterlo, ya que la función se ejecuta dentro del $(document).ready(function(){}

    de momento he llegado hasta aquí,

    $(document).ready(function(){
    $(“#nav a”).each(function(){
    var href = $(this).attr(“href”);
    $(this).attr({ href: “#”});

    $(this).mouseup( function(){

    $(“#show”).fadeOut(600); <—— lo ejecuta cuando ha cargado el nuevo div.
    $("#show").hide().load(href, function() {$("#show").fadeIn(600);});

    });
    });
    });

    Alguna idea de hacerle que primero ejecute el fade out y luego carge el resto???

1 2

Deje un comentario

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*