Todos/as hemos leído el Tutorial de AJAX. Siempre tuve ganas de poder usar el ejemplo en un proyecto, pero nunca lo he intentado usar por ser intrusivo. Pero el otro día leyendo la documentación de jQuery me encontré con una cosa.
En este tip os voy a mostrar qué fácil es cargar documentos externos HTML con jQuery de forma no intrusiva.
Empezaremos creando una página HTML con un menú de navegación. Una lista normal a la que pondremos como identificador: "nav"
Y un contenedor donde cargaremos el HTML externo en este caso un div con id show:
Código :
<div id="show"></div>
Pero este código HTML es suficiente para que funcione, hace falta jQuery. Lo primero que hacemos es bajarnos la última versión de aquí (comprimido) y lo colocamos en nuestra página entre las etiquetas head así:
La "magia" del código está en $("#show").load(href);. Funciona parecido al include() de PHP. Primero seleccionamos el lugar donde se cargará el contenido y luego el contenido a cargar. (Aquí la documentación de jQuery). En nuestro caso, al hacer click en los elementos a que estén incluidos en #nav, #show se cargará las páginas a las que enlazan éstas.
Buen Tip, me gusto excepto por un detalle: ¿Como linkeas el js directamente a la web de jquery? ... sería mejor bajar el .js y ponerlo en un server propio... por el bien de la web de jquery y la tuya. Por lo demás, muy buen tip para partir en lo "oculto" de jQuery. Por:RattaMono
pero funciona colocando el link de la web de jquery?..creo q voa probar xP yo tb pensé lo mismo que RattaMono..
Buen Tip!..gracias Por:jst!_blog
No puedo ver el ejemplo, ni entrar a la página principal... Por:El Mooorsa_blog
exelente ... pero como hacer par que funcione el back de int explorer por ejemplo ? Por:aldo_blog
Saludos a todos: Tengo un archivo php donde se nuestra los datos de una base de datos en una tabla. La tabla tiene efetos jquery("cebrada"). Cuando cargo este archivo php con load o $.ajax estos efectos se pierden. Que error cometo? Me pueden ayudar Geacias Por:ladeld_blog
como podria hacer para desarrollar una función donde solo le pase los parametros como el div ha cargar,la pagina ha cargar y el nombre del control y no necesariamente amarrarlo a que la eqtiqueta "a" este dentro de un DIV Por:Rob_blog
hay otra forma de hacer sin poner el: $(this).attr({ href: "#"}); pq le paso parametros en ASP, y en firefox funciona perfectamente pero en explorer el link que ya he clickado cambia el nombre del enlace a # y por tanto no pasa el parametro inc_web.asp?id=5 Por:PoZu_blog
<!-- Funcion carga automatica de index2.htm -->
<script type="text/javascript">
$(document).ready(function(){
$("#cuerpo").load("/index2.htm");
});
</script>
</head>
.
.
.
pero no me carga el contenido del index1 :/
alguien me podria ayudar? pliss Por:hola, soy new , alguien m
Hola, necesito ayuda urgente, estoy haciendo mi sitio con transiciones y llamadas via jquery y en la pagina de noticias quiero poder cargar dentro del
<div id="contenido">noticias.php</div>
como puedo hacer para poder cargar una pagina php dentro de mi pagina html?
No quiero esto:
J0h :
wenas quisiera hacer lo mismo pero mostrando un archivo php alguna ayudita? Riendo
Simplemente coloca la dirección de tu php en el link:
Muy bueno la verdad es una gran herramienta el JQuery, pero quisiera saber si alguien podria mostrarme como hacer esto pero con un menu Flash y que carge una pagina html en un Div en la misma pagina, se que con una funcion javascript, se puede, pero para darle este efecto de aparicion lenta y con JQuery es algo mejor.
Pero tampoco que me muestre la pag. html en un frame o iframe, sino en un DIV, ya que este se adapta al tamaño que tenga tu pag. html y no como los frame o iframe que te muestran sus barras.
Ok spero me hayan entendido y espero que muchos de los usuarios que dominan flash me puedan dar una solucion.
Gracias de Antemano. Por:AyllonDark-blog
Ola diganme muy bueno este ejemplo, pero como podria hacer para que al cargar una pagina primero me carge la imagen gif de "loading.gif" y luego me carge el verdadero contenido de esa pagina, con el efecto de aparicion transparente del texto o documento.
ya que con botones en flash la veo mas dificil.
Gracias de Antemano. Por:AyllonDark
Exelente el codigo NEO_JP pero como seria si queremos que al ingresar cargue el primer link.
Gracias Por:Christian-blog
La verdad haces más sencilla la vida con estos tips .
Tengo una duda, y si quisiera que solo carge una web sin dar click a algún boton, como cambiaría la función?? Por:BlackMage
Gracias!! justo lo que estaba buscando. Buen post!!! Por:Andrea-blog
Muy buen Tips, pero como podria hacer si tengo dos DIVS y quiero que al hacer click en el LINK 1 me carge en la DIV1 x ejemplo y si clikeo en el LINK 2 el contenido me lo carge en la DIV2 y no la 1?
Muchas Gracias Por:BEZOWIE-blog
hola si pongo esto:
<a href="mipagina.php">PHP</a> lo que me habre es la ventana para guardar ese archivo, mas no la pagina, le explico tengo el index.php y las otras pagina como _menuVertica.php tambien cabecera.php ese es el problema... como hago para del menu enlazarlas con <a href=...... Por:ilen-blog
ps utilice tu ejemplo y me resulto excelente pero ahora quiero que los links que me aparecen en el div de contenido no me aparescan en una ventana nueva si no en el mismo div.
eso se puede con ese mismo script? Por:covra-blog
podrias dejar los archivos en un .zip para que los destripe... porque no me sale. Por:miguel-blog
Muchas gracias, era lo que estaba buscando. Estoy simplificando todo lo que puede ser simplificado, que diría John Maeda, y este truco ayuda mucho.
Saludos! Por:Adrián-blog
La verdad que esta muy bueno el tutorial logre que funcione todo pero tengo dos problemas el primero es que no se como cambiar el lugar donde aparece la imagen de precarga loading.gif es decir quiero poder ubicar en la parte que yo quiera la imagen cuando carga. tambien necesito lograr que funcionen los botones adelante y atraz del Ie firefox etc.. si me ayudan con esto se los voy a agradecer muchisimo
Saludos! Por:Marco-blog
Por si a alguien le sirve arregle el prolema de posicionar el loading.gif donde yo queria cree un div: <div id="loading"></div> le di el estilo asi:
#loading {
position:absolute;
height: 15px;
width: 155px;
left: 358px;
top: 21px;
}
de esa manera puedo elegir donde quiero que apareza la imagen de carga
sigo tratando de lograr que funcionen los botones de atras y adelante prove con ajaxhistoy algo asi y no me funciona si alguien tiene una solucion para eso se lo voy a agradecer mucho saludos! Por:Marco-blog
Hola todos, este es un truco muy util, pero como se puede hacer si creamos los botones en un flash????
Por favor me es muy urgente y no lo doy encontrado!!! Por:Bea-blog
Muy bueno la verdad es una gran herramienta el JQuery, pero quisiera saber si alguien podria mostrarme como hacer esto pero con un menu Flash y que carge una pagina html en un Div en la misma pagina, se que con una funcion javascript, se puede, pero para darle este efecto de aparicion lenta y con JQuery es algo mejor.
Pero tampoco que me muestre la pag. html en un frame o iframe, sino en un DIV, ya que este se adapta al tamaño que tenga tu pag. html y no como los frame o iframe que te muestran sus barras.
Ok spero me hayan entendido y espero que muchos de los usuarios que dominan flash me puedan dar una solucion.
Gracias de Antemano.
Este comentario está más arriba y me identifico con él. Por favor si habéis resuelto el problema o alguién sabe como hacerlo por favor ayudadme. Llevo dias buscando y no encuentro nada.