Ajax con Mootools

25/Feb/2008 154

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&iacute; 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.

Ver ejemplo

Comentarios

  1. prednisonedosage [#]

    prednisolone dosage https://prednisolonesodiumphosphat.com/

  2. accutane ipledge [#]

    isotretinoin side effects roaccutane side effects

  3. adderallvsmodafinil [#]

    modafinil reviews buy provigil

  4. generickГЅ stromektol [#]

    cost of ivermectin 3mg tablets http://www.ivermecton.com/ ivermectine

CSSLab