Mootools nos permite integrar fácilmente Ajax según nuestras necesidades, ya sea mediante el envio de formularios o, como lo veremos ahora, el rescate de información desde una fuente externa a nuestra página, sin tener que volver a cargar la página. Primero, construiremos un HTML donde estará un lugar delimitado en que se cargará la info desde otro HTML creado también por nosotros (un lorem ipsum cualquiera). Y claro, un botón que gatillará la acción mediante Ajax.
<a href="" id="comienza">Rescata la info</a>
<div id="traelo_aqui">
<p>Trae aquí la info</p>
</div>Básicamente es un botón que al ser presionado cargará la info desde una página determinada por nosotros mediante JS hasta el div que definimos. Ahora, mediante Mootools crearemos el evento:
$('boton').addEvent('click', function(e) {
e = new Event(e).stop();
var url = "http://www.csslab.cl/ejemplos/ajax_mootools/lipsum.html";
$('traelo_aqui').empty().addClass('cargando');
new Ajax(url, {
method: 'get',
update: $('traelo_aqui'),
onComplete: function() {
$('traelo_aqui').removeClass('cargando')
}
}).request();
});Al elemento con id="boton" (o sea, <a id="boton">) le agregamos un evento de ‘click’ (addEvent). De ahí, comenzamos una función que a través del método ‘get’, trae lo que esté en la variable url (var url) y refresca lo que esté adentro del id="traelo_aqui" (o sea <div id="traelo_aqui">). Además, agregaremos una class="cargando" al contenedor mientras se está rescatando la información por si se demora mucho (addClass(‘cargando’);) y cuando termine todo, sacaremos esa class (removeClass). Básicamente esa es la explicación.
Comentarios
Una duda, ¿podemos pasar variables por la URL (archivos.php?esto=dsadsaa)………….o MooTools nos ofrece otra opción?….por cierto el diseño del blog de 10 ;)…felicidades
http://docs12b.mootools.net/Request/Request.HTML
Puedes usar el metodo get.
.get({‘user_id': 25});
Buenas
Esta opción me parece muy buena y estaría muy bien poder añadirle un efecto de transición a la carga de nuevo documento.
Pero tengo algunas dudas:
¿Indexan bien los buscadores este contenido?
¿No hay manera de que el botón atrás del navegador funcione como con una web normal?
interesante la iniciativa del cambio de apariencia pero se ve algo defectuoso ,” YO” preferia el de antes la galería de noticias que colocaron es algo torpe cuando uno está viendo los intros, sacaron el Tag Cloud, a demás que se ve muy pésimo ( y no es nuestra culpa ) en explorer , lo malo que muchos lo utilizan . bueno es mi aporte se que esto esta en beta espero mejore para todos los interesados en esto .
pd: a mi me encantaba el skin anterior , ese era un buen piso .
maldicion aun se ve mal en IE6?? horror, vere q pasa con eso. @Webramientas, la indexacion de buscadores lamentablemente no sera como si el contenido estuviera ahi, pero eso siempre sucede ccon cualquier metodo de rescate de datos externos. salu2.
Hola Admin de CSSLab. Entro constantemente a tu web para ver si hay nuevos post, pero al ver este nuevo diseño, nuevo cambio, la verdad me desilucione. No se man porque siempre tratas de inventar cosas raras, estas perjudicando la accesibilidad de tu sitio, le das una funcion que es mas incomoda. Ademas, en ie7 anda muy mal el sitio en estos momentos. No te escribo para discriminar el sitio o algo de eso, sino todo lo contrario. De todas formas el contenido es muy bueno. Saludos.
Root: es una lastima que no puedo agradar a todos, el diseño es demasiado subjetivo. solo cumplo con la funcion principal de que la informacion se presente de manera adecuada y que pueda ser leida bien por todos. estoy al tanto del problema del slider de la home en los IE’ses, trabajare en ello apenas pueda. Otros problemas de estilos ya fueron solucionados, cero que ese es el ultimo que me queda. Gracias por preocuparte y tomarte el tiempo de escribirme. Salu2.
jorge se ven bien los cambios que haces, solo que en la intro estaria mejor si no se moviera por si solo los posts… quedaria mejor si lo dejas a consideracion del usuario asi si el quiere ver lo demas, solo bastara con dar click, IE x sucks….. aunque es bueno que des soporte para ello, pues no todos usan FF.
saludos man, y sige asi!
gracias vevni por tu opinion, IE ha sido un dolor de cabeza con ese slider… me voy a españa por unos dias y a la vuelta veo q pasa con ese tema. por mientras, igual se leen los articulos. salu2.
demasiado genial el nuevo diseño… me gusto bastante el trabajo de los espacios… felicitaciones
bueno, leyendo eso ed la indexacion de los buscadores… estoy en desarrollo de un sitio, y decidi hacerlo mediante ajax la carga de contenido… la idea que se me ocurrio para que indexara, fue poner en el href del link la direccion del archivo que debia cargar ya que al poner
e = new Event(e).stop();
se elimina el evento y no te carga la pagina, por ende, el buscador ira a las paginas que tienen la informacion, ya que el buscador no lee JS… eso
saludos
Llego un poco tarde, pero espero que tengáis a bien echarme una mano.
Quisiera anidar esta forma de cargar contenidos.
Siguiendo el ejemplo, si pongo en el archivo ‘lipsum.html’ código html va perfecto, pero si le pongo una nueva llamada mootools-ajax a un tercer contenido, digamos ‘lipsum2.html’, queda desactivada, o sea, no funciona.
He probado con mootools 1.2.4 y tampoco.
¿Alguien sabe como cargar contenido dinámico a partir de una capa ya recargada? Si es que se puede…
Muchas gracias
Carlos: tienes alguna URL donde estes trabajando para ver el codigo q tienes?
No, lo siento, pero te puedo explicar, tengo una capa central con una imagen del país con un mapeo de enlaces por regiones de tal modo que al pulsar sobre una región me muestra una imagen ampliada de la región que tiene un mapeo por provincias. Yo quiero que al pulsar sobre una provincia me aparezca una imagen ampliada de la provincia mapeada por comarcas, y así sucesívamente.
El problema es que me carga el código HTML perfecto del archivo externo, pero no el contenido activo, ni tips ni nuevas recargas de la capa ni nada, puro HTML.
¿porqué? ¿hay algún truco para cargar contenido activo?