jQuery » Cargar un fichero con jQuery
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.
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.
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...
Además añadiremos una capa, a la cual daremos el ID texto, sobre la cual cargaremos el fichero HTML.
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
 Visualiza el artículo |  Descargar el código |  Error en el código |  Foro sobre jQuery |
Artículos relacionados:
Abril 3, 2009 #
Hola te queria agradecer por el codigo, me sirvio de mucho, lo modifique para poder cargar paginas distintas desde un menu.
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
Abril 15, 2009 #
Bueno esta es la modificacion que realice
function cargalapagina(pagina){
var paginacargada = pagina;
$(“div#derecha”).load(paginacargada);
}
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?
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
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?
Agosto 10, 2011 #
Intenta esto
$(document).ready(function(){
$(“#contenedor”).load(“pagina.html”);
});
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..
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[...]…
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???