Navegacion Ajax con enlaces normales

quico5 · #1 (**permalink**) 28/01/2014, 21:33

Hace tiempo vi un ejemplo de este tipo...

Nota1: en HTML5.1 han aprobado el uso de la etiqueta <main>
Nota2: Creo recordar que al usar los enlaces de manera estándar no debería dar problemas de SEO

Cuando pinchemos en un enlace me gustaría que se bloquease la acción y se recogiera el contenido de la etiqueta MAIN de la pagina de destino y se reemplazase el contenido del MAIN de la pagina actual sin movernos de la pagina en cuestión, y se actualizase la barra de direcciones, me suena que los botones atras-adelante de los navegadores actuales reconocen estas acciones sin darles soporte via javascript para que funcionen

gracias

Código HTML:

<!doctype html>
<html lang="es">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<nav>
		<ul>
			<li><a href="link1.html">Link1</a></li>
			<li><a href="link2.html">Link2</a></li>
			<li><a href="link3.html">Link3</a></li>
		</ul>
	</nav>
	<main>
		Aqui se cargara el contenido del <main> de la web de destino
	</main>
</body>
</html>

maycolalvarez · #2 (**permalink**) 29/01/2014, 15:11

no conozco esa etiqueta <main>, además que por lo que veo algunos navegadores aún no la soportan.

El truco más viejo (y efectivo) para lograr enlaces normales que funcionen con ajax, es deshabilitar desde javascript el click, para ello retornando false en el evento onclick luego de ejecutar el ajax (también se puede usar preventDefault())

ello se combina desde el servidor detectando si la petición viene desde el XHR, en tal caso se genera el layout o no, tambien existe la api de HTML5 pushState, para lograr cambiar el fragmento de la URL luego del dominio, para brindar al usuario de una forma de copiar una URL válida para SEO (ya que no usa el #) y que ni se den cuenta que es AJAX, tal cual usa facebook

quico6 · #3 (**permalink**) 29/01/2014, 16:57

Gracias por responder maycolalvarez

tengo este ejemplo que encontré en Internet, aun no tengo claro como basarme en el, ni como paso del enlace pinchado a capturar solo un área de ese archivo para traerlo al archivo actual, igual no es el mejor ejemplo para basarme

Código HTML:

<p>Estas en la página<span id="coord">5</span>.</p>
<p>
 <a href="?x=6" onclick="go(1); return false;">Ir a página 6</a> o
 <a href="?x=4" onclick="go(-1); return false;">Volver a página 4</a>?
</p>
<script>
 var currentPage = 5; // Arrancamos desde la pagina 5

 function go(d) {
   setupPage(currentPage + d);
   history.pushState(currentPage, document.title, '?x=' + currentPage);
 }
 onpopstate = function(event) {
   setupPage(event.state);
 }
 function setupPage(page) {
   currentPage = page;
   document.title = 'Página ' + currentPage;
   document.getElementById('coord').textContent = currentPage;
   document.links[0].href = '?x=' + (currentPage+1);
   document.links[0].textContent = 'Ir a página ' + (currentPage+1);
   document.links[1].href = '?x=' + (currentPage-1);
   document.links[1].textContent = 'Volver a página ' + (currentPage-1);
 }
</script>

quico6 · #4 (**permalink**) 29/01/2014, 17:23

he encontrado este ejemplo, pero parece que carga todo el HTML, volviendo a descargar los archivos del HEAD y el HTML común
[URL="https://github.com/cairo140/html5-history-example"]https://github.com/cairo140/html5-history-example[/URL]

En teoria en esta web lo hacen
[URL="http://html5.gingerhost.com/"]http://html5.gingerhost.com/[/URL]
[URL="http://www.forosdelweb.com/f179/no-entiendo-este-codigo-ajax-1029727/"]http://www.forosdelweb.com/f179/no-entiendo-este-codigo-ajax-1029727/[/URL]

quico6 · #5 (**permalink**) 29/01/2014, 17:53

No encontraba este código... http://www.forosdelweb.com/f179/jque...ciona-1046592/

http://anhida.es/anterior/responsive/js/navAjax.js

es de hace casi un año, este quedara funcionando

quico5 · #6 (**permalink**) 29/01/2014, 18:49

En google chrome recibo este mensaje
event.returnValue is deprecated. Please use the standard event.preventDefault() instead. jquery.js:9597

esto me funciona:
$('article').load(url + ' article>*');

pero esto no:
$('title').load(url + ' title>*'); ó $('title').load(url + ' title');
$('h1').load(url + ' h1>*'); ó $('h1').load(url + ' h1');

¿a que se debe?

gracias

PHPeros · #7 (**permalink**) 30/01/2014, 09:09

Cita:

Iniciado por quico5

En google chrome recibo este mensaje
event.returnValue is deprecated. Please use the standard event.preventDefault() instead. jquery.js:9597

esto me funciona:
$('article').load(url + ' article>*');

pero esto no:
$('title').load(url + ' title>*'); ó $('title').load(url + ' title');
$('h1').load(url + ' h1>*'); ó $('h1').load(url + ' h1');

¿a que se debe?

gracias

Actualiza tu versión de jQuery, es un bug