11548 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous.

J'ai encore une fois besoin de votre aide.
En ce moment j'essaie de toucher un peu à XMLHttpRequest, et j'ai un petit soucis.
En effet, je suis en train d'implanter une surcouche js, qui réécrit toutes les liens de ma page afin d'utiliser XMLHttpRequest et de rester compatible avec les utilisateurs n'utilisant pas le js ^^.
Mon but est en fait de garder tout le corps de ma page et de changer seulement le cadre centrale (pour intégrer ma galerie, ou mon système de news), sans recharger le reste de la page pour mettre par exemple un player, ou d'autres modules. Ainsi l'utilisateur peut continuer sa navigation en continuant l'écoute de sa musique et l'utilisation des différents modules.

Ma fonction me servant à réécrire mes liens est la suivante :


function initLiens(conteneur)
	{
	var listeMenus;
	var hrefBrut;
	var hrefSit;
	var page;
	var r;
	var parametres;
	var recherche= new RegExp('monsite\.dyndns\.org','gi');
	listeMenus=document.getElementById(conteneur).getElementsByTagName('a');
	for(r=0;r<listeMenus.length;r++)
		{
		hrefBrut=listeMenus[r].href;
		hrefSit=hrefBrut.substring(hrefBrut.indexOf("sit="));
		//cas de la page d'accueil, sans la variable sit
		if((hrefBrut==hrefSit)&&(hrefSit.match(recherche)))
			{
			page='accueil.php';
			listeMenus[r].setAttribute('href',"#");
			listeMenus[r].addEventListener('click',chargerPage(page),false);
			}
		//cas d'une page à inclure.
		else if(hrefBrut!=hrefSit)
			{
			page=hrefSit.substring(4);
			parametres=page.substring(page.indexOf("&")+1);
			if(page.substring(0,page.indexOf("&")).length!=0)
				{
				page=page.substring(0,page.indexOf("&"));
				page=page+'.php?'+parametres;
				}
			else
				{
				page=page+'.php';
				}
			listeMenus[r].setAttribute('href',"#");
			listeMenus[r].addEventListener('click',chargerPage(page),false);
			}
		//Pour les autres pages, on ne fait rien, les liens restent.
		}
	}


Ainsi je récupère le contenu de la variable sit, "utilisée par le php" pour inclure telle ou telle page dans la cadre centrale, et je la passe en argument de cette fonction :

function chargerPage(page) 
	{
	//On utilise une fonction anonyme ici pour recréer un contexte de scope. Dans le cas contraire, page, vaudrait "le dernier de la liste de liens"
	//page n'est plus une variable globale
	return function()
		{
		var xhr2 = new_xhr();//On crée un nouvel objet XMLHttpRequest
		xhr2.onreadystatechange = function()
			{
			if ( xhr2.readyState == 4 )
				{//Actions executées une fois le chargement fini
				if(xhr2.status  != 200)
					{//Message si il se preoduit une erreur
					document.getElementById("contenu").innerHTML ="Error code " + xhr2.status;
					}
				else 
					{//On met le contenu du fichier externe dans la div "contenu"
					document.getElementById("contenu").innerHTML = xhr2.responseText;
					}
				} 
				else 
					{//Message affiché pendant le chargement
					document.getElementById("contenu").innerHTML = "Chargement en cours ...<br />";
					}
			}
		xhr2.open("GET", 'inc/inc.'+page, true);//Appel du fichier externe
		xhr2.send(null);
		}
	}


Ainsi je recharge mon cadre centrale "contenu" avec la page correspondante.

J' exécute la fonction de réécriture des liens dans un window.onload. Jusque là tout se passe bien Smiley biggrin . Mes liens fonctionnent correctement, mes pages se chargent, pas de soucis à par le style mais c'est un autre soucis.

Le soucis, c'est que mes pages inclues contiennent également des liens (par exemple pour les pages suivantes/précédentes dans mon système de news, etc...). Il faudrait donc que je les réécrive également. Là je me dis, pas de problème, il suffit seulement que je rappelle ma fonction initLiens après avoir récupéré ma page à la fin de la fonction chargerPage....mais....marche pô Smiley bawling . Bizarrement, si je place un breakpoint et que je fonctionne en pas à pas avec un débugger, la réécriture s'effectue correctement, mais pas en fonctionnement "normale".

Alors un problème avec le innerHTML qui fiche en l'air le DOM? Une autre erreur? Comment procéder? ça doit être un truc courant mais je ne trouve pas :'(.

Merci à tous ceux qui pourront me donner un coup de main.
Modifié par kook.kai (11 Sep 2007 - 14:35)
Plop tout le monde! Toujours pas de solution de mon côté Smiley sweatdrop

Est ce que mon message est clair au moins.... Smiley biggol

Merci pour les réponses que vous pourrez me donner...même juste des idées, parce que je suis un peu à sec Smiley decu
ton rappel de initLiens() se trouve-il bien lorsque le retour de ta requête ajax est fini et chargé dans le dom de la page??
Ouch, erreur d'algo de ma part Smiley ohwell

Je pars quelques jours en vacances, je regarde 5mins et je me dis...oups, pas trop là qu'il fallait le mettre mon rappel de initLiens, je l'avais mis juste après le send plutôt que de le mettre après le innerHTML....problème de contexte (si quelqu un peut confirmer ou réfuter?).

Enfin bref, quelques jours de repos, ça fait toujours du bien.

Merci encore MoOx Smiley rolleyes