Hoy día estaba con Javier de Mancormedia y ya había terminado una aplicación bien interesante, pero el siguiente paso era pasar todos los links para que funcionen con Ajax. No ibamos a cambiar todos los links para que funcionen con Ajax, uno por uno, entonces se me ocurrió una idea bien sencilla pero efectiva.

Por ejemplo, toda la aplicación estaba dentro de un div con el id “data”. Entonces con unas simples líneas de javascript se pudo realizar este cambio sin la necesidad de tocar nada de la aplicación.

Primero están los links dentro del DIV

1
2
3
4
5

<div id="data">
	<a href="link1.html">Link 1</a><br />
	<a href="link2.html">Link 2</a><br />
	<a href="link3.html">Link 3</a>
</div>

Ahora solo llamamos a la librería JQuery y escribímos nuestro código paso a paso

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<div id="data">
	<a href="link1.html">Link 1</a><br />
	<a href="link2.html">Link 2</a><br />
    <a href="link3.html">Link 3</a>
</div>
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script language="javascript">
function Cargo(){
	$("#data a").click(function(){
		alert(this.href);
		return false;
	});
}
$(document).ready(Cargo);
</script>

Primero decimos que cuando cargue la página llame a la función “Cargo”, donde todas las etiquetas “<a>” dentro de “<div id=”data”></div>” luego de ser cliqueadas muestren una alerta de la ruta absoluta de su destino pero luego con el “return false;” estamos diciendo que no vaya a ningún sitio.

Lo que vamos a hacer ahora es cargar esta misma ruta en el DIV mediante Ajax

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<div id="data">
	<a href="link1.html">Link 1</a><br />
	<a href="link2.html">Link 2</a><br />
    <a href="link3.html">Link 3</a>
</div>
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script language="javascript">
function Cargo(){
	$("#data a").click(function(){
		UpdateDiv(this.href);
		return false;
	});
}
function UpdateDiv(Url){
	$.ajax({
		type: 'get',
		url: Url,
		dataType: 'html',
		success: function(data){
			$("#data").html(data)
		}
	});
}
$(document).ready(Cargo);
</script>

Con este ejemplo hacemos que cargue la página en el “DIV”, pero qué pasa si queremos cargar la información en otro DIV y que sea dinámico según el link? Igual de sencillo. Solamente ponemos un atributo más en la etiqueta “<a>”, “rel”, y lo igualamos al nombre del DIV que queremos que cargue la página.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

<div id="data">
	<a href="link1.html" rel="data2">Link 1</a><br />
	<a href="link2.html">Link 2</a><br />
    <a href="link3.html">Link 3</a>
</div>
 
<!-- Aquí estamos creando la otra capa -->
<div id="data2"></div>
 
<script type="text/javascript" language="javascript" src="jquery.js"></script>
<script language="javascript">
function Cargo(){
	$("#data a").click(function(){
		UpdateDiv(this.href, this.rel);
		return false;
	});
}
function UpdateDiv(Url, Capa){
	Capa = Capa||"data";
	$.ajax({
		type: 'get',
		url: Url,
		dataType: 'html',
		success: function(data){
			$("#"+Capa).html(data)
		}
	});
}
$(document).ready(Cargo);
</script>

Si quieren que todos los links carguen por ajax, pero algunos no, podemos hacer que el valor de “rel” sea “no-ajax”. Solo cambiamos la función “Cargo” (por cierto, pueden darle cualquier nombre a las funciones)

function Cargo(){
	$("a").click(function(){
		if(this.rel != "no-ajax"){
			UpdateDiv(this.href, this.rel);
			return false;
		}else{
			return true;
		}
	});
}

En este caso, todos los links cargaran por ajax y la información se podrán en el div con el ID igual al valor que tiene el atributo “rel” de los links, excepto los que tengan como valor “no-ajax”

Eso es todo, como ven solo son unas pocas líneas. Todo es cosa de creatividad y hacer las funciones de tal manera que funcione para todos los casos.

No olviden crear las páginas para que no tengan problemas con los 404.

Be Sociable, Share!