[AJAX] Chargement de fichiers et affectation d'évenements

Version imprimable

Bonjour,

Je bloque sur une page qui fonctionne ainsi :

1) chargement de fichiers html externes et affichage dans des div
2) affectation d'évènements à tous les boutons de class "bouton"

Ca passe avec IE, mais FF semble ne pas voir les éléments issus des fichiers chargés.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 function appelHtml(page, cible) { if ( window.ActiveXObject ) var XhrObj = new ActiveXObject("Microsoft.XMLHTTP"); // IE else var XhrObj = new XMLHttpRequest(); // FF XhrObj.open("GET", page) ; XhrObj.onreadystatechange = function() { if ( XhrObj.readyState == 4 && XhrObj.status == 200 ) { document.getElementById(cible).innerHTML = XhrObj.responseText ; } } XhrObj.send(null) ; } var tab_bouton = document.getElementsByClassName('bouton') ; for ( var i = 0 ; i < tab_bouton.length ; i++ ) tab_bouton[i].onclick = ouvreCalque ;
Sur un alert ( tab_bouton.length ) , FF renvoie 0, IE renvoie 25.

Quelqu'un a t'il une idée ?

D'avance merci.

11/10/2007, 17h56
denisC

Citation:

Envoyé par olbouss

Quelqu'un a t'il une idée ?

Tu as un problène de synchronisation. Ton bloc de code

Code:

var tab_bouton = document.getElementsByClassName('bouton') ;

peut très bein s'executer avant le retour de ton contenu (C,est probablement ce qui se passe dans FFx).

Déplace tout ce que tu veux faire au retour du contenu Ajax dans le handler XhrObj.onreadystatechange.

Il fallait effectivement attendre que Firefox charge les fichiers.

J'ai placé des compteurs au chargement des fichiers :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
 
var n_calques = 0 ;
var ntotal_calques = 0 ;
 
function appelHtml(page, cible) {
 
	ntotal_calques ++ ;
	if ( window.ActiveXObject ) var XhrObj = new ActiveXObject("Microsoft.XMLHTTP"); // IE
	else var XhrObj = new XMLHttpRequest(); // FF
 
	XhrObj.open("GET", page) ;
 
	XhrObj.onreadystatechange = function() {
		if ( XhrObj.readyState == 4 && XhrObj.status == 200 ) 	{
			document.getElementById(cible).innerHTML = XhrObj.responseText  ;
			n_calques ++ ;
		}
	}
 
	XhrObj.send(null) ;
 
}

et une fonction en fin de page :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
 
var actif = window.setInterval("detect_fin_chargement()", 1000) ;
 
function detect_fin_chargement() {
 
	if ( n_calques == ntotal_calques ) {
 
		window.clearInterval(actif) ;
 
		var tab_bouton = document.getElementsByClassName('bouton') ;
		for ( var i = 0 ; i < tab_bouton.length ; i++ ) tab_bouton[i].onclick = ouvreCalque ;
 
 
	}
 
 
}

Merci d'avoir jeter un oeil.