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.
$(document).ready(function(){
$("#carga").click(function() {
// Código
});
});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
$("#carga").click(function() {
$("div#texto").load("test.html");
});
MiguelMich
podrías publicar tu código para saber cual es la razón y como ayudarte.
salu2
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.
Miguel Carales
Felicitaciones, por compartir esos conocimientos, he aprendido varias cosas que me complicaban como realizarlas, GRACIAS NUEVAMENTE, espero compartir con UD tambien ….
Saludos
Miguered
Siiiii!!!! funciona!!!! muchas graciasss!! ;D
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);});
});
});
});
});
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);});
});
});
});
});
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???
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..
MiguelMich
Intenta esto
$(document).ready(function(){
$(“#contenedor”).load(“pagina.html”);
});
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?
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
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?
Luis Garrido
Bueno esta es la modificacion que realice
function cargalapagina(pagina){
var paginacargada = pagina;
$(«div#derecha»).load(paginacargada);
}
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
Luis Garrido
Hola te queria agradecer por el codigo, me sirvio de mucho, lo modifique para poder cargar paginas distintas desde un menu.