Múltiples triggers en onLoad con Ajax y Prototype

Cuando trabajamos con ajax logramos efectos bastante buenos para nuestras páginas, pero podemos perder compatibilidad con motores de búsqueda o usabilidad con los usuarios que tienen desactivado javascript.

Una de las formas de solucionar estos inconvenientes es transformar los links ordinarios en links para ajax por medio del mismo javascript. Para eso utilizaremos el atributo rel para indicar que enlaces son los que queremos que se modifiquen:

Código :

<a href="tudestino.html" rel="ajax" >Click Aqui</a>

Para poder transformar este link en un enlace asíncrono necesitamos utilizar una función de javascript. Aca en cristalab hay algunos tutoriales que hacen efectos similares, pero en este caso utilizaremos prototype para la función:

Código :

function cambiaMisLinks()
{
     var links = $$('a[rel=ajax]'); //Busca los lnks que tenga el atributo rel="ajax"
     for ( var i = 0; i < links.size(); i++ )
     {
          links[i].observe( 'click', abrirLink ); //Observa el evento click del link y llama a abrirLink 
     }
}

Ahora definimos la función abrirLink() que se encargará de realizar el proceso de abrir las páginas por medio de ajax.

Código :

function abrirLink( event )
{
     var div = $( 'contenido' ); // Equivale a document.getElementById( 'contenido' )
     var link = event.element(); // Al usar un observador no podemos usar this
                                          // De esta manera obtenemos el elemento

     new Ajax.Updater
     (
           div, // Es el div que se actualizara asíncronamente
           link.href, // La url del link
           { 
               parameters: { ajax : true }  //Un parámetro para distinguir que se cargo por ajax
           } 
     )

     event.stop(); // De esta manera evitamos que el link nos lleve a otra pagina
}

Y lo único que nos falta es ejecutar la función al cargar la página. Eso lo hacemos con:

Código :

Event.observe( window, 'load', cambiaMisLinks );

¿Pero que pasará si con los nuevos links que vengan dentro de la sección que llamamos con ajax? Como la función solo se ejecuta al cargar la página estos links ya no se cambiarán, así que llamamos la función otra vez utilizando onComplete en el Ajax.Updater

Código :

new Ajax.Updater
     (
           div, // Es el div que se actualizara asíncronamente
           link.href, // La url del link
           { 
               onComplete: function()
               {
                     cambiaMisLinks(); // Llamamos la función al terminar de cargar la sección con ajax
               }
               parameters: { ajax : true }  //Un parámetro para distinguir que se cargo por ajax
           } 
     )

De esta manera garantizamos que la función se ejecute al cargar una nueva sección con ajax. Pero si queremos que se ejecuten varios script al cargar la sección, y queremos garantizar la compatibilidad del código sin tener que regresar y agregar nuevas funciones tendremos que hacer algunos ajustes adicionales.

Primero creamos un evento personalizado, y garantizamos que este evento "ocurra" al cargar nuestra página principal.

Código :

function nuevoEvento()
{
      $( 'principal' ).fire('site:inicio''); // nuestro div principal "dispara" el evento personalizado
}

Event.observe( window, 'load', nuevoEvento );

Ahora modificamos el evento con el que llamamos a nuestra función para que sea nuestro evento personalizado en lugar de el evento onload de la página

Código :

Event.observe( window, 'site:inicio', cambiarMisLinks ); 

y finalmente modificamos nuestro Ajax.Updater

Código :

new Ajax.Updater
     (
           div, // Es el div que se actualizara asíncronamente
           link.href, // La url del link
           { 
               onComplete: function()
               {
                    $('principal').fire( 'site:inicio' ); //Dispara evento personalizado
               }
               parameters: { ajax : true }  //Un parametro para distinguir que se cargo por ajax
           } 
     )

Ahora cuando queramos que una función de javascript se ejecute al cargar nuestra página inicial y cada vez que carguemos una sección mediante ajax solamente la agregamos a nuestro evento personalizado:

Código :

Event.observe( window, 'site:inicio', nuevaFuncion );

//o también

Event.observe( window, 'site:inicio', function(){ 
       // Tu código aqui
} );

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.