JQuery history & tous navigateurs sauf Firefox

Question

Spirit505050

4 Mar 2009 à 17:22

Bonjour,
Je développe un site web "pure Ajax" utilisant le framework jQuery et certains de ces plugins afin de permettre une navigation tout en écourant de la musique. La navigation se fait grâce au plugin jQuery history qui offre d'utiliser les boutons back et next du navigateur et les enregistrement dans les favoris.

URL du site : Elektrochoc-2009.com
Hebergement : OVH mutualisé 60GP

Cette navigation fonctionne parfaitement sous Firefox mais ne fonctionne pas sous Safari, Internet Explorer et Google Chrome (et surement les autres aussi).
Voila le code ce cette navigation (j'ajoute que j'ai deja essayer de commenter tous les autres scripts js pour voir d'où venait le problème, je suis quasiment sure que cela vient de jQuery history)

HTML :

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

		<style type="text/css">@import "template/orange/style.css";</style>
		<style type="text/css">@import "template/orange/style-js.css";</style>

		<script src="template/javascript/jquery-1.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="template/javascript/jquery.wslide-0.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="template/javascript/jquery.transition-2.0.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="template/javascript/jquery.history.js" type="text/javascript" charset="utf-8"></script>
		<script src="template/javascript/jquery.googlemaps.js" type="text/javascript" charset="utf-8"></script>
		<script src="template/javascript/myScripts.js" type="text/javascript" charset="utf-8"></script>
		<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAhRE4TzdOOq6200NpRd-lERRG9ty_RnOvByyFLtGcFb10TQDClBTaU2CYaeil1qBRX5krDDKnizPlZA"type="text/javascript"></script>
		
		<title>{TITLE_PAGE}</title>
		
		<script type="text/javascript" charset="utf-8">
		<!--
		sfHover = function() {
		        var sfEls = document.getElementById("menu").getElementsByTagName("LI");
		        for (var j=0; j<sfEls.length; j++) {
		                sfEls[j].onmouseover=function() {
		                        this.className+=" sfhover";
		                }
		                sfEls[j].onmouseout=function() {
		                        this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		                }
		        }
		}
		if (window.attachEvent) window.attachEvent("onload", sfHover);		
		-->
		</script>
		
	</head>
	
	<body>
		<div id="global">
			<div id="header">
				<div id="menu">
					<ul>
						<li id="tab1" class="active"><a title="Accueil" class="history" href="#accueil" >Accueil</a></li>
						<li id="tab2"><a title="Actualités" class="history" href="#actu" >Actualités</a></li>
						<li id="tab3"><a title="Artistes" class="history" href="#artistes" >Artistes</a></li>
						<li id="tab4">
							<a title="Informations Pratiques" class="history" href="#infos" >Infos</a>
							<ul>
								<li><a title="Informations Pratiques - Lieu" class="history" href="#infos-lieu" >Lieu</a></li>
								<li><a title="Informations Pratiques - Transport" class="history" href="#infos-transport" >Transport</a></li>
								<li><a title="Informations Pratiques - billeterie" class="history" href="#infos-billeterie" >Billeterie</a></li>
							</ul>
						</li>
						<li id="tab5">
							<a title="Historique" class="history" href="#historique" >Historique</a>
							<ul>
								<li><a title="Historique 2008" class="history" href="#historique-2008" >Festival 2008</a></li>
								<li><a title="Historique 2007" class="history" href="#historique-2007" >Festival 2007</a></li>
							</ul>
						</li>
						<li id="tab6"><a title="Forums" class="history" href="./forums/" target="out">Forums</a></li>
						<li id="tab7"><a title="Liens" class="history" href="#liens" >Liens</a></li>
						<li id="tab8"><a title="Contacts" class="history" href="#contact" >Contacts</a></li>
					</ul>
				</div>
				
			</div>
			
			<div id="center">
				<div id="content"></div>
			</div>

		</div>
	</body>
</html>

Javascript : myScripts.js

function GetId(id) {
	return document.getElementById(id);
}
			
function change_current_tab(new_current_tab) {
	// On désactive chaque onglet
	for(var i = 1; i <= 8; i++) {
		var tab = GetId("tab" + i);
		tab.className = "";
	}

	// On active le bon onglet
	var tab = GetId(new_current_tab);
	tab.className = "active";
}

// PageLoad function
// This function is called when:
// 1. after calling $.historyInit();
// 2. after calling $.historyLoad();
// 3. after pushing "Go Back" button of a browser
function pageload(hash) {
	if(hash) {			
		var i = hash.indexOf("-");
		var part1 = "";
		var part2 = "";
					
		if(i == -1) {
			hash = hash + ".php";
		} else {
			part1 = hash.substr(0, i);
			part2 = hash.substr(i + 1, hash.length);
			hash = part1 + ".php?page=" + part2;
		}
					
		if(hash.indexOf("accueil") != -1) {
			change_current_tab("tab1");
			document.title = "Elektrochoc 2009 - Accueil";
		}
		if(hash.indexOf("actu") != -1) {
			change_current_tab("tab2");
			document.title = "Elektrochoc 2009 - Actualité";
		}
		if(hash.indexOf("artistes") != -1) {
			change_current_tab("tab3");
			document.title = "Elektrochoc 2009 - Artistes";
		}
		if(hash.indexOf("infos") != -1) {
			change_current_tab("tab4");
			document.title = "Elektrochoc 2009 - Infos";
		}
		if(hash.indexOf("historique") != -1) {
			change_current_tab("tab5");
			document.title = "Elektrochoc 2009 - Historique";
		}
		if(hash.indexOf("liens") != -1) {
			change_current_tab("tab7");
			document.title = "Elektrochoc 2009 - Liens";
		}
		if(hash.indexOf("contact") != -1) {
			change_current_tab("tab8");
			document.title = "Elektrochoc 2009 - Contacts";
		}
					
		$("#content").html('<p style="text-align: center; font-weight : bold; margin-top: 30px;">Chargement... <br /><br /><img src="./template/orange/images/loading.gif"></p>');
					
			setTimeout(function() {
				$("#content").load(hash, function() {
					
					$(".accordion h3:first").addClass("active");
					$(".accordion p:not(:first)").hide();
					$(".accordion h3").click(function(){
					$(this).next("p").slideToggle("slow").siblings("p:visible").slideUp("slow");	
				$(this).toggleClass("active");						$(this).siblings("h3").removeClass("active");
				});
							
				$("#galerie2007").transition({
					title: "Elektrochoc 2007",
					images: [
						{image: "images/2007/01.jpg", thumb: "images/2007/thumb/01.jpg", title: "01.jpg"},
						{image: "images/2007/02.jpg", thumb: "images/2007/thumb/02.jpg", title: "02.jpg"},
						{image: "images/2007/03.jpg", thumb: "images/2007/thumb/03.jpg", title: "03.jpg"},
						{image: "images/2007/04.jpg", thumb: "images/2007/thumb/04.jpg", title: "04.jpg"},
						{image: "images/2007/05.jpg", thumb: "images/2007/thumb/05.jpg", title: "05.jpg"},
						{image: "images/2007/06.jpg", thumb: "images/2007/thumb/06.jpg", title: "06.jpg"},
						{image: "images/2007/07.jpg", thumb: "images/2007/thumb/07.jpg", title: "07.jpg"}
					],

					displayCaption: false,
					autoRun: true,
					displayTime: 3000,
					ransitionTime: 500
				});
							
				$("#galerie2008").transition({
					title: "Elektrochoc 2008",
					images: [
						{image: "images/2008/01.jpg", thumb: "images/2008/thumb/01.jpg", title: "01.jpg"},
						{image: "images/2008/02.jpg", thumb: "images/2008/thumb/02.jpg", title: "02.jpg"},
						{image: "images/2008/03.jpg", thumb: "images/2008/thumb/03.jpg", title: "03.jpg"},
						{image: "images/2008/04.jpg", thumb: "images/2008/thumb/04.jpg", title: "04.jpg"},
						{image: "images/2008/05.jpg", thumb: "images/2008/thumb/05.jpg", title: "05.jpg"},
						{image: "images/2008/06.jpg", thumb: "images/2008/thumb/06.jpg", title: "06.jpg"},
						{image: "images/2008/07.jpg", thumb: "images/2008/thumb/07.jpg", title: "07.jpg"},
						{image: "images/2008/08.jpg", thumb: "images/2008/thumb/08.jpg", title: "08.jpg"}
					],

					displayCaption: false,
					autoRun: true,
					displayTime: 3000,
					transitionTime: 500
				});
								
				$("#map").googleMap(48.2996682, 4.072001, 15, {
					controls: ["GSmallMapControl", "GMapTypeControl"],
					markers: $(".geo")
				});

											
			});				
		}, 400);
					
	} else {
				
		$("#content").html('<p style="text-align: center; font-weight : bold; margin-top: 30px;">Chargement... <br /><br /><img src="./template/orange/images/loading.gif"></p>');
					
		setTimeout(function() {
			change_current_tab("tab1");
			document.title = "Elektrochoc 2009 - Accueil";
			$("#content").load("accueil.php");							
		}, 400);
					
	}
}
			
			
$(document).ready(function(){
	$.historyInit(pageload);
};

$(document).ajaxComplete(function(){

	// sélection de tous les liens a ayant l'attribut rel égal à history (valeur arbitraire)
	$("a[@class='history']").click(function(){

		//suppression du mot cle history, pour que les liens ne soient surchargés qu'une seule fois
		this.rel = this.rel.replace(/history/, '');
       
		// mise à jour de l'ancre
		var hash = this.href;
       
		// suppression du caractère #
		hash = hash.replace(/^.*#/, '');
       
		// chargement dans l'historique et appel de pageload
		$.historyLoad(hash);
       
		// trés important : désactivation du clic du lien a
		return false;
	});
 
});

Voila, vous pouvez tester avec Firefox (ca fonctionne) et avec un autre navigateur où ca ne fonctionnera pas.
Je ne vois pas du tout où se trouve ce problème et ca me bloque totalement.

Je vous remercie d'avance.

Spirit
Modifié par Spirit505050 (04 Mar 2009 - 20:36)

fabien.menager

4 Mar 2009 à 20:19

Bonjour, à première vue, tu as un

ocument.title = "Elektrochoc 2009 - Accueil";

Il manque un "d" à document.
Ensuite, je sais pas comment t'aider, je connais pas jQuery (même si j'aimerais bien m'y mettre)

Spirit505050

4 Mar 2009 à 20:35

Merci, petite erreur de copier/coller dans mon post.

Si quelqu'un d'autre a déjà rencontré un problème de ce type, et si quelqu'un peut me confirmer que ça ne fonctionne pas sur IE (histoire que je me suicide si ça fonctionne).

Spirit505050

5 Mar 2009 à 15:29

Bonjour,

Je vais simplifier un peu le code JavaScript, car le problème viens vraisemblablement de la navigation :

// PageLoad function
// This function is called when:
// 1. after calling $.historyInit();
// 2. after calling $.historyLoad();
// 3. after pushing "Go Back" button of a browser
function pageload(hash) {
	if(hash) {			
		/* Traintement de l'ancre */	
		
		$("#content").html('<p style="text-align: center; font-weight : bold; margin-top: 30px;">Chargement... <br /><br /><img src="./template/orange/images/loading.gif"></p>');
					
			setTimeout(function() {
				$("#content").load(hash, function() {
					/* ... */							
			});				
		}, 400);
					
	} else {
				
		$("#content").html('<p style="text-align: center; font-weight : bold; margin-top: 30px;">Chargement... <br /><br /><img src="./template/orange/images/loading.gif"></p>');
					
		setTimeout(function() {
			$("#content").load("accueil.php");							
		}, 400);				
	}
}
			
			
$(document).ready(function(){
	$.historyInit(pageload);
};
 
$(document).ajaxComplete(function(){
 
	// sélection de tous les liens a ayant l'attribut rel égal à history (valeur arbitraire)
	$("a[@class='history']").click(function(){
 
		//suppression du mot cle history, pour que les liens ne soient surchargés qu'une seule fois
		this.rel = this.rel.replace(/history/, '');
       
		// mise à jour de l'ancre
		var hash = this.href;
       
		// suppression du caractère #
		hash = hash.replace(/^.*#/, '');
       
		// chargement dans l'historique et appel de pageload
		$.historyLoad(hash);
       
		// trés important : désactivation du clic du lien a
		return false;
	});
 
});

Et d'après Internet Explorer, il y aurait une erreur sur cette ligne :

$("a[@class='history']").click(function(){

Merci.

ps : Si vous avez une autre solution, qui couplerait navigation sans rechargement de page, Go Back Button, Favori et pourquoi pas bon reférencement ... je suis preneur.

fabien.menager

5 Mar 2009 à 15:42

Pourquoi pas simplement

$("a.history").click(function(){

c'est bien un selecteur CSS, non ?

Spirit505050

5 Mar 2009 à 16:25

RRRRrrrrrr ...
d'où le fait qu'il ne faille jamais reprendre du code !

Bon, je te remercie beaucoup tout de même.

Cette solution, m'a ouvert la porte à d'autre problème, mon code est beaucoup trop lourd, et fait presque planter IE en bouffant toutes les ressources CPU.

Merci.

Spirit - qui part à l'assaut ! Smiley cligne

Tony Monast

Modérateur

5 Mar 2009 à 16:48

Bonjour Spirit,

Est-ce une expérience que tu veux mener en réalisant un site en Full AJAX? Si c'est uniquement dans le but de faire jouer de la musique en continu lors de la navigation, le choix ne me semble pas des meilleurs. J'imagine que tu as conscience qu'en l'état actuel, la consultation du site est impossible sans Javascript. Cela risque d'empêcher l'accès à plusieurs visiteurs potentiels, et bloquer aussi les robots d'indexation, à moins que tu aies déjà prévu de corriger cette lacune éventuellement?

Bonne journée!

Spirit505050

5 Mar 2009 à 16:55

Bonjour,

Merci pour ta remarque, j'ai conscience que le site sera inaccessible pour tout navigateur ayant la fonction javascript désactivée.
Je voudrais par la suite trouver un moyen, qui me semble largement possible, de sélectionner en fonction du navigateur (notamment de la fonction javascript) une version du site (normal ou full AJAX) car, il n'y a que les liens qui sont a changer.
Par exemple /news.php?page=2 à la place de /#news-page-2.

Si tu as des pistes, je suis preneur.

Merci.

Tony Monast

Modérateur

5 Mar 2009 à 17:04

Si tu souhaites conserver la navigation en Ajax, je crois qu'une solution serait de créer le site en HTML simple, avec des liens directs vers les fichiers. Une fois la navigation fonctionnelle sans Javascript, tu ajoutes une fonction Javascript au chargement de la page qui irait modifier le comportement des liens du menu. Bref, une fonction qui activerait la navigation en AJAX. Au final, tu aurais :

- Un site accessible sans Javascript, pour les utilisateurs et les robots d'indexation
- Si le Javascript est supporté, un site avec une navigation en AJAX.

C'est une analyse rapide, mais je crois que c'est une piste que je suivrais si je voulais faire un site en full ajax.
Modifié par Tony Monast (05 Mar 2009 - 17:05)

Sujet clos