Cargar un fichero con jQuery

25/Ene/2009 jQuery 16 Comentarios
programación jquery en español

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. <div id="texto"></div>

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. });

Vídeos sobre jQuery


16 comentarios en “Cargar un fichero con jQuery”

Víctor Cuervo

MiguelMich

podrías publicar tu código para saber cual es la razón y como ayudarte.

salu2

Víctor Cuervo

Camilo

Buen día amigos , alguien de usted seria tan amable de darme una mano con esto de cargar un archivo html en un div en intentado muchas veces y de muchas formas pero no obtengo el resultado que espero , he visitados diferentes posts y las soluciones son muy similares a esta, le agradezco ala persona que me pueda colaborar.

Víctor Cuervo

Miguel Carales

Felicitaciones, por compartir esos conocimientos, he aprendido varias cosas que me complicaban como realizarlas, GRACIAS NUEVAMENTE, espero compartir con UD tambien ….

Saludos

Víctor Cuervo

Miguered

Siiiii!!!! funciona!!!! muchas graciasss!! ;D

Víctor Cuervo

miguelmich

Al parecer la visualización no se vé bien, otra vez:

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

$(this).mouseup( function(){

$(“#show”).fadeOut(600,function(){
$(this).load(href, function() {$(this).fadeIn(600);});
});

});
});
});

Víctor Cuervo

miguelmich

Podrías intentar esto:


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

$(this).mouseup( function(){

$(“#show”).fadeOut(600,function(){
$(this).load(href, function() {$(this).fadeIn(600);});
});

});
});
});

Víctor Cuervo

Miguered

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

Víctor Cuervo

Miguel

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

Víctor Cuervo

MiguelMich

Intenta esto

$(document).ready(function(){

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

});

Víctor Cuervo

Miguel

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?

Víctor Cuervo

miguelmich

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

Víctor Cuervo

roberto

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?

Víctor Cuervo

Luis Garrido

Bueno esta es la modificacion que realice

function cargalapagina(pagina){
var paginacargada = pagina;

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

}

Víctor Cuervo

MiguelMich

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

Víctor Cuervo

Luis Garrido

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

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*