Navigation Ajax avec Historique et transitions

Bug sur IE et Mozilla

Sujet résolu

9 août 2010 à 22:05:24

Bonjour à tous.

Après de longues recherches j'ai trouvé un script opensource pour faire une navigation Ajax, tout en ayant l'historique.
à vrai dire j'en avais un pour l'historique et un pour la navigation. j'en ai rajouté un pour l'animation entre les pages.
J'ai réussi à rendre le tout compatible et à le faire marcher.

Le problème c'est que sous Internet explorer et Mozilla quand on clique sur un lien, rien ne ce passe. Seulement l'url change.
Il faut alors cliquer sur rafraichir et là, seulement là, la page s'affiche.
Par contre sous chrome et opéra ça marche...

Voici l'url du site
http://moonlite.fr/test2/AjaxFinal/

Et voici l'html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/core.js"></script>
    <script type="text/javascript" src="js/galleria.js"></script>  
    <script type="text/javascript" src="js/galleria.flickr.js"></script>  
    <link rel="stylesheet" media="screen" type="text/css" href="css/main.css" />
    <link rel="stylesheet" media="screen" type="text/css" href="css/galleria.classic.css" />
</head>
<body>


<div id="container">
    <div id="menu">
    	<div id="loading">Chargement...</div> 
        <ul>
            <li><a href="#home">&nbsp;Accueil&nbsp;</a></li>
            <li><a href="#gallerie">&nbsp;Gallerie&nbsp;</a></li>
            <li><a href="#contact">&nbsp;contact&nbsp;</a></li>
        </ul>
        <span class="clear">&nbsp;</span>
    </div>

    <div id="content">
        <noscript>
            <p>JavaScript doit être activé pour utiliser ce site web avec la version standard. Il semble que ce langage soit désactivé ou qu'il ne soit pas pris en charge dans votre navigateur. Pour utiliser la version standard, activez JavaScript en modifiant les options de votre navigateur et essayez  de nouveau.</p>    
            <p>Pour utiliser la version HTML simplifiée, qui ne nécessite aucun script JavaScript, cliquez <a href="#">ici</a>.</p>
        </noscript>
    </div>
</div>
	
</div>
</body>
</html>

Puis le javascript

//On load page, init the timer which check if the there are anchor changes each 300 ms
$().ready(function(){
	setInterval("checkAnchor()");
});
var currentAnchor = null;
//Function which chek if there are anchor changes, if there are, sends the ajax petition
function checkAnchor(){
	//Check if it has changes
	if(currentAnchor != document.location.hash){
		currentAnchor = document.location.hash;
		//if there is not anchor, the loads the default section
		if(!currentAnchor)
			query = "section=home";
		else
		{
			//Creates the  string callback. This converts the url URL/#main&id=2 in URL/?section=main&id=2
			var splits = currentAnchor.substring(1).split('&');
			//Get the section
			var section = splits[0];
			delete splits[0];
			//Create the params string
			var params = splits.join('&');
			var query = "section=" + section + params;
		}
		//Send the petition
		$("#loading").fadeIn(250);
		$.get("callbacks.php",query, function(data){
			$("#content").fadeOut(250, function(){
				$("#content").empty()
				$("#content").html(data);				
				$("#loading").fadeOut(750);
				$("#content").fadeIn(500);
				})
		});
	}
}

Et j'utilise la bibliothèque jquery-1.4.2.min.js

pour appeler les pages j'utiliser une page php

<?php
//Captures the petition and load the suitable section
switch($_GET['section']){
	case 'home':
		include "pages/home.html";
	break;
	case 'gallerie':
		include "pages/gallerie.php";
	break;
	case 'contact':
		include "pages/contact.html";
	break;
	case 'images':
		include "pages/images.php";
	break;
	case 'images2':
		include "pages/images2.php";
	break;
	default:
	echo '<h1>Erreur 404</h1>';
	echo '<p>La page que vous cherchez n\'existe pas!</p>';
}
?>

Merci de votre aide.
à bientôt

miclebowski

10 août 2010 à 10:26:32

Salut, ton code est complique pour pas grand chose, tu ferais énormément d'appels pour rien (même si c'est pas le cas ici a cause de ta structure...

) :

$(window).load(function() {
   $('#menu a').click(function() {
      checkAnchor();
   });
});

Il devrait déjà y avoir du mieux

.

PS : Tu peux aussi regarder ici, ca pourra toujours te servir : http://www.siteduzero.com/tutoriel-3-1 [...] tml#ss_part_4

(je suis pas sur d'ailleurs que setInterval marche sans temporisation.

Nyx'

10 août 2010 à 10:47:17

il me semble que ton code à une erreur de syntaxe. et j'ai essayé de le mettre à la fin de mon code mais le contenu ne s'affichais même plus...

miclebowski

10 août 2010 à 10:54:50

Indeed, oubli de 2 parenthèses et d'une accolade

. Effet secondaire du codage en live sur le SdZ

J'ai édité mon post au dessus

(et pas besoin de le mettre a la fin, la place importe peu ici

)

Nyx'

10 août 2010 à 11:05:39

Oui c'est vrai!
Je l'ai donc mis en début pour changer.
maintenant ça marche un peu mieux, il faut cliquer 2 fois sur un liens du menu pour changer de page.
Sauf que quand on se trouve sur la page galerie et que l'on clique sur l'une des 2 galeries ( donc des liens de faisant pas parti du menu) on à toujours le même problème.

Et si au lieu de mettre '#menu a', on mettais simplement 'a' ça serais possible?

miclebowski

10 août 2010 à 11:12:40

Oui, j'avais mis ca pour pas que les autres liens déclenchent une action inutile, mais si ca change pas l'ancre ca fera rien de toute façon, donc tu peux tenter

PS : Sur ta page online tu as encore laisse $().ready

Nyx'

10 août 2010 à 11:15:29

oui car ça me permet de charger automatiquement la page home si il n'y a pas de contenu...

et mettre seulement 'a' ne change rien au problème...

miclebowski

10 août 2010 à 11:21:47

comme c'est du contenu généré dynamiquement :

$('a').live('click', function() {

PS : Tu devrais fortement relire le tuto jQuery : http://www.siteduzero.com/tutoriel-3-1 [...] ire-plus.html

Nyx'

10 août 2010 à 11:24:48

ta solution marche à peu près, mais je ne comprends vraiment pas pourquoi il faut cliquer 2 fois sur un liens pour que le contenu se charge...

miclebowski

10 août 2010 à 11:26:28

Ca marche très bien en cliquant qu'une fois..... o_O

Nyx'

10 août 2010 à 11:28:58

pas avec mozilla en tout cas!

Si tu est attentif à ce qui ce passe, on remarque que lorsque l'on clique, l'url change, ensuite il ne se passe rien pour moi, ensuite tu clique sur n'importe quel lien, ça va te charger le précédent. Et ainsi de suite...

miclebowski

10 août 2010 à 11:30:01

Effectivement dis comme ca, c'est toujours mieux d'expliquer

Je regarde le souci..

Nyx'

10 août 2010 à 11:31:39

non et je viens de tester àvec chrome c'est pareil... aussi quand tu charge l'adresse http://moonlite.fr/test2/AjaxFinal/
le contenu de home ne se charge plus...

Pour info c'est toujours navigable par clavier mais en 2 clik...

miclebowski

10 août 2010 à 11:35:02

Déjà pour l'avoir au chargement de la page :

$(window).load(function() {
   checkAnchor();
 
   $('#menu a').live('click',function() {
      checkAnchor();
   });
});

Nyx'

10 août 2010 à 11:38:07

oui logique tu me diras!
c'est le même principe de ce que j'avais fais avant!

et il faut définitivement mettre 'a' à la place de '#menu a' car sinon je ne peux pas charger d'autre liens que ceux du menu.

Aussi sur IE quand tu charge avec le liens, ça ne met pas home, ça bug, mais quand tu rafraichis ça charge... les problèmes doivent être liés!

miclebowski

10 août 2010 à 11:47:42

Essaye peut être de changer $('a').live en $('a,li').live

Enfin, a priori le problème viendrait plutôt de checkAnchor()

Sinon, change la fin :

$("#content").fadeOut(250).empty().html(data).fadeIn(500);	
$("#loading").fadeOut(750);

Nyx'

10 août 2010 à 11:52:29

je l'ai fais sachant bien que ça n'aurais rien changé.... ça rajoute seulement un paramètre c'est pas plus mal mais de toute façon tu ne peux pas cliquer sur un li, enfin ça ne fera rien

!

Sinon je vois pas ce que tu cherche à faire avec le truc à la fin. c'est pas de là que viens le problème. enfin je pense.

Bon c'est vrai que pour la même chose c'est plus simple mais comme je disais le problème ne viens pas de là...

Ah, à bien regarder ça ne rends pas pareil, on voit le contenu changer avant le fadein...

miclebowski

10 août 2010 à 12:36:30

En fait, dans ce qu'il y avait avant, il manquait un ; après $("#content").empty()

Sinon, je vois pas d'explication pour le retard.... c'est bizarre :euh:

Ah si en fait j'ai compris d'où vient le bug : en fait il applique la fonction immédiatement au clic, alors que l'ancre a pas encore eu le temps de changer.... du coup après 2 clics, il récupère l'ancre précédente CQFD

Voila la solution qui devrait être fonctionnelle (même si pour le même système on aurait pu faire plus simple que d'utiliser le hash ) :

$(window).load(function() {
   checkAnchor();
 
   $('a').live('click',function() {
      setTimeout(checkAnchor, 500);
   });
});

Nyx'

10 août 2010 à 13:19:23

Merci!
j'ai enfin, grâce à toi, réussi à me faire une navigation Ajax avec historique, signets, transition, et navigation clavier! On peux même charger la page en tapant l'url!
c'est génial!

Si tu as une idée pour alléger le script n'hésite pas!

le seul problème qu'il me reste à résoudre c'est au niveau de la galerie photo.
Quand elle se charge elle prend toute la largeur de l'écran puis se redimensionne normalement une fois chargée...
Mais ce n'est pas trop trop grave

miclebowski

10 août 2010 à 13:24:40

Pour améliorer le script : galerie c'est un seul 'l'

(ca ma l'air effectivement fonctionnel sinon et pas trop lourd, donc pas de souci de ce cote la)

(par contre avec cette technique je crois que l'indexation google sera pas forcement géniale.... mais après c'est peut être pas ta priorité non plus

)

Nyx'

10 août 2010 à 13:25:38

aurais tu une idée pour améliorer l'indexation? car de ce côté je ne suis pas trop callé...

miclebowski

10 août 2010 à 13:27:57

Tu as pas mal d'infos chez google : http://www.google.com/support/webmaste [...] &answer=35291

Sinon essaye de rechercher SEO ou de regarder webrankinfo, la bible sur le sujet : http://www.webrankinfo.com/

Nyx'

10 août 2010 à 13:42:48

mais pourquoi le référencement ne serais pas top? à cause de l'ajax?

miclebowski

10 août 2010 à 13:44:54

Parce que ton affichage nécessite javascript pour fonctionner : http://www.google.com/support/webmaste [...] nswer=35769#2

Nyx'

10 août 2010 à 14:07:27

Oui mais je compte faire une version sans. et l'afficher via le noscript.

Sinon sur IE, quand tu tape manuellement l'adresse, ça plante. tu rafraichis, ça marche nickel après! Que faire pour cette m**** de IE?