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
} );

Autor: Odin

Usuarios que han visto este tema también han visto...

- Detectar el bloqueo de mayúsculas
- Información del Navegador en JavaScript
- Las funciones trigonométricas en Javascript
- Objetos en JavaScript
- Seleccionar y copiar formulario con Javascript

- Versión imprimible de este documento

- Enviar por e-mail este documento