Récupérer du HTML ajouté avec AJAX

**Incognito87** · 05/12/2014, 11h51

Bonjour,

Voici mon problème :

Après une requête Ajax de placer un formulaire(formulaire.php) dans une page index.php (cela fonctionne), je souhaite récupérer le DOM du formulaire...pour ensuite refaire une requête Ajax;

Mon code:index.php

Code php :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<?php
$notes=array ('Do'=>'C' , 'Ré'=>'D' , 'Mi'=>'E' , 'Fa'=>'F' , 'Sol'=>'G' , 'La'=>'A' , 'Si'=>'B');
$result="";
 if($_SERVER["REQUEST_METHOD"]=="POST"){
 if(!empty($_POST['noteSelected'])){
	$note=$_POST['noteSelected'];
	if($note!=='Choisir...'){
		$result='<p>La note '.$note.' correspond à la note '.$notes[$note].', en notation américaine.</p>';
	}
}
echo $result;
}
?>
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
<html lang="fr">
<title>Convertisseur de note musicale</title>
<link href="note_music_style.css" rel="stylesheet" type="text/css" />
<script src="code.js"></script>
</head>
<body>
<div id="formulaire"></div>
</body>
</html>

formulaire.php

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<form action="index.php" method="post" id="form">
	<fieldset>
	<legend>Conversion des notes de musique</legend>
	<p>Choisissez une note:</p>
		<select name="noteSelected" id="sel">
			<option value="">Choisir...</option>
		<?php
                $notes=array ('Do'=>'C' , 'Ré'=>'D' , 'Mi'=>'E' , 'Fa'=>'F' , 'Sol'=>'G' , 'La'=>'A' , 'Si'=>'B');
                foreach($notes as $noteSelected=>$noteCorrespondante){
                echo'<option value="'.$noteSelected.'">'.$noteSelected.'</option>';
                }
                ?>
		</select>
	<p id="message"></p>
	</fieldset>
</form>

code.js

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
 window.addEventListener("load", function(event) {
 
 /*Création du titre*/
 
	var titre=document.createElement('div');
	titre.innerHTML='Convertisseur de note musicale ';
 
	document.body.appendChild(titre);
 
/*Création du bouton Notation*/	
	var buttonNotation=document.createElement('button');
		buttonNotation.value="Notation";
		buttonNotation.name="Notation";
		buttonNotation.innerHTML="Notation";
 
	titre.appendChild(buttonNotation);
 
/*Création du tableau de correspondance*/
		note={'Choisir...':' ','Do':'C','Ré':'D','Mi':'E','Fa':'F','Sol':'G','La':'A','Si':'B'};
 
/*Création et apparition du bouton Close*/
			var buttonClose=document.createElement('button');
			buttonClose.value="Close";
			buttonClose.name="Close";
			buttonClose.innerHTML="Close";
			buttonClose.style.display="none";
 
 
/*requéte AJAX formulaire*/
buttonNotation.addEventListener('click',function(event){
(function(){
	var fonctionFormulaire={
		init:function(){
 
			/*Disparition du bouton Notation et apparition du bouton Close*/
			buttonNotation.style.display="none";
			buttonClose.style.display="block";
 
			titre.appendChild(buttonClose);
 
			event.preventDefault();
 
			var formulaire=document.getElementById('formulaire');	
 
			var xmlhttp=new XMLHttpRequest();
 
				xmlhttp.addEventListener('readystatechange',function(event){
 
					if(xmlhttp.readyState==4){
						if(xmlhttp.status=="200"){	
							formulaire.innerHTML=xmlhttp.responseText;	
							titre.appendChild(formulaire);
						}
					else
						{
							alert('error code'+xmlhttp.status+':'+xmlhttp.statusText);
						}
					}
			    });			
			xmlhttp.open("GET","formulaire.php",true);
			xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded; charset=UTF-8");
			xmlhttp.send();
			}
			}
		fonctionFormulaire.init();
	})()
});
 
/*Disparition du formulaire, du bouton close et apparition du bouton notation*/
			buttonClose.addEventListener('click',function(event){
			formulaire.style.display="none";
			buttonNotation.style.display="block";
			buttonClose.style.display="none";
 
			titre.appendChild(buttonNotation);
			});
 
/*Réapparition du formulaire aprés un clic sur le bouton Notation*/
			buttonNotation.addEventListener('click',function(event){
			formulaire.style.display="block";
			});
 
 
 /*Requéte AJAX */
(function(){
	var resultat={
		init:function(){
 
			var sel=document.getElementById('sel');
 
			sel.addEventListener('change',function(event){
 
			event.preventDefault();
 
			var noteSelected=sel.options[sel.selectedIndex].value;
 
			alert(noteSelected);
 
			var xmlhttp=new XMLHttpRequest();
 
				xmlhttp.addEventListener('readystatechange',function(event){
 
					if(xmlhttp.readyState==4){
						if(xmlhttp.status=="200"){
 
							var message=document.getElementById('message');
							message.innerHTML=xmlhttp.responseText;
 
						}
					else
						{
							alert('error code'+xmlhttp.status+':'+xmlhttp.statusText);
						}
					}
			    });
 
			xmlhttp.open("POST","index.php",true);
			xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded; charset=UTF-8");
			xmlhttp.send("noteSelected="+noteSelected);
			});
			}
		}
		resultat.init();
	})()
});

C'est au niveau de la seconde requête Ajax, qu'il y a un problème.

J'ai essayer de placer un alert dans la deuxième requête mais rien ne se passe...

D'avance, merci pour vos réponses.

Cordialement.

**lysandro** · 08/12/2014, 16h20

Le problème vient de ce qu'au moment où est exécutée : resultat.init(), c'est à dire sur l'événement load de window, ton formulaire n'est pas encore dans la page et, a fortiori, le select non plus. Donc document.getElementById("sel") renvoie null.
Normalement il devrait y avoir une erreur qquepart (console?) sur l'instruction sel.addEventListener(...).

Le code de index.php me semble incorrect, mais je n'y connais rien.

Le code javascript est inutilement complexe :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
(function(){
	var <object> = {
		init:function(){
			// code de la fonction init
		}
	};
	<object>.init();
})();

se remplace avantageusement par :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

// code de la fonction init

voir, si vraiment une isolation/cloture est indispensable :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
(function(){
	// code de la fonction init
})();

Aussi bizarre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
/*Création du tableau de correspondance*/
note={'Choisir...':' ','Do':'C','Ré':'D','Mi':'E','Fa':'F','Sol':'G','La':'A','Si':'B'};

n'est pas utilisé, et en plus note est déclarée dans le contexte global, soit window.note, volontaire ?

Pour avancer : tester, tester, tester :
- dans code.php, met en commentaire le chargement de script :
<-- <script src="code.js"></script> -->et, au moins pour tester, remplace la méthode de soumission POST par GET ;
- dans un navigateur appelle ta page : http://.../index.php ;
- regarde le source de la page ;
- dans un autre onglet (ou fenêtre) appelle ta page avec : http://.../index.php?noteSelected=Do ;
- compare le source de la page avec ce que tu veux obtenir ;
Quand tu auras corrigé les erreurs dans ton code php, tu pourras t'attaquer au code js.

L'idée est de tester de manière incrémentale, une chose après l'autre, en ajoutant de la complexité au fur et à mesure.
C'est à dire dans ton cas :
- ne conserver que la création du titre et son ajout au body ;
-- tester ;
-- comparer le résultat obtenu avec celui désiré ;
-- corriger ;
-- recommencer à tester ;
- ajouter un élément, le bouton buttonNotation ;
-- tester ;
-- etc.

Bon courage.

**Incognito87** · 08/12/2014, 17h14

Dans l'exercice précédent, le formulaire était généré par JavaScript (avec des create élément) ensuite le formulaire est traité par PHP via une requête Ajax...Cet exercice est ok et je n'ai pas eu de probléme a le faire.Maintenant c'est le formulaire qui est généré par PHP...

Je vais réfléchir a vos conseils, Cordialement.

**Incognito87** · 08/12/2014, 17h28

"Le problème vient de ce qu'au moment où est exécutée : resultat.init(), c'est à dire sur l'événement load de window, ton formulaire n'est pas encore dans la page et, a fortiori, le select non plus. Donc document.getElementById("sel") renvoie null.
Normalement il devrait y avoir une erreur qquepart (console?) sur l'instruction sel.addEventListener(...)."

J'ai analyser ce probléme depuis une console.

Voilà mon probléme est bien cerné, donc comment faire pour que le DOM de mon formulaire soit accessible lors de mon apparition de mon formulaire sur ma page web ?

Cordialement

**Incognito87** · 08/12/2014, 17h54

j'ai utiliser "formulaire.addEventListener('load',function(event){ " avant ma fonction résultat...mais cela marche toujours pas.

**lysandro** · 08/12/2014, 18h11

Dans le code HTML que tu donnes en exemple, l'identifiant 'formulaire' correspond à une balise 'div' vide. Avant d'accéder au DOM de ton formulaire, tu dois le charger, donc faire une requête en AJAX. Tu as déjà le code de chargement du formulaire.

Envoyé par Incognito87

comment faire pour que le DOM de mon formulaire soit accessible lors de mon apparition de mon formulaire sur ma page web ?

La réponse est dans la question. Quand ? au chargement de la page ce qui correpond dans ton code à l'évènement 'window.onload'.

**Incognito87** · 09/12/2014, 10h18

Bonjour,

Ma console JavaScript m'annonce bien que mon formulaire est chargé...mais je n'arrive tjrs pas à accéder à mon DOM du formulaire...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
window.addEventListener("load", function(event) {
 /*Création du titre*/
 
	var titre=document.createElement('div');
	titre.innerHTML='Convertisseur de note musicale ';
 
	document.body.appendChild(titre);
 
/*Création du bouton Notation*/	
	var buttonNotation=document.createElement('button');
		buttonNotation.value="Notation";
		buttonNotation.name="Notation";
		buttonNotation.innerHTML="Notation";
 
	titre.appendChild(buttonNotation);
 
 
/*Création et apparition du bouton Close*/
			var buttonClose=document.createElement('button');
			buttonClose.value="Close";
			buttonClose.name="Close";
			buttonClose.innerHTML="Close";
			buttonClose.style.display="none";
 
 
/*requéte AJAX formulaire*/
buttonNotation.addEventListener('click',function(event){
(function(){
	var fonctionFormulaire={
		init:function(){
 
			/*Disparition du bouton Notation et apparition du bouton Close*/
			buttonNotation.style.display="none";
			buttonClose.style.display="block";
 
			titre.appendChild(buttonClose);
 
			event.preventDefault();
 
			var formulaire=document.getElementById('formulaire');	
 
			var xmlhttp=new XMLHttpRequest();
 
				xmlhttp.addEventListener('readystatechange',function(event){
 
					if(xmlhttp.readyState==4){
						if(xmlhttp.status=="200"){
							var formulaire=document.getElementById('formulaire');
							formulaire.innerHTML=xmlhttp.responseText;	
							titre.appendChild(formulaire);
						}
					else
						{
							alert('error code'+xmlhttp.status+':'+xmlhttp.statusText);
						}
					}
			    });			
			xmlhttp.open("GET","formulaire.php",true);
			xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded; charset=UTF-8");
			xmlhttp.send();
			}
			}
		fonctionFormulaire.init();
	})()
});
 
/*Disparition du formulaire, du bouton close et apparition du bouton notation*/
			buttonClose.addEventListener('click',function(event){
			formulaire.style.display="none";
			buttonNotation.style.display="block";
			buttonClose.style.display="none";
 
			titre.appendChild(buttonNotation);
			});
 
/*Réapparition du formulaire aprés un clic sur le bouton Notation*/
			buttonNotation.addEventListener('click',function(event){
			formulaire.style.display="block";
			});
 
 /*Requéte AJAX */
formulaire.addEventListener('load',function(event){
	var resultat={
		init:function(){
			window.addEventListener("load", function(event) {
			var sel=document.getElementById('sel');
 
			sel.addEventListener('change',function(event){
 
			event.preventDefault();
 
			var noteSelected=sel.options[sel.selectedIndex].value;
 
			alert(noteSelected);
 
			var xmlhttp=new XMLHttpRequest();
 
				xmlhttp.addEventListener('readystatechange',function(event){
 
					if(xmlhttp.readyState==4){
						if(xmlhttp.status=="200"){
 
							var message=document.getElementById('message');
							message.innerHTML=xmlhttp.responseText;
 
						}
					else
						{
							alert('error code'+xmlhttp.status+':'+xmlhttp.statusText);
						}
					}
			    });
 
			xmlhttp.open("POST","index.php",true);
			xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded; charset=UTF-8");
			xmlhttp.send("noteSelected="+noteSelected);
			});
			});
			}
		}		
		resultat.init();
});
});

**lysandro** · 09/12/2014, 12h04

Que se passe-t-il dans ton code ?

- Le navigateur charge ta page
- Une fois la page chargée, un événment 'load' se produit.
- Cet événement 'load' déclenche le code que tu as enregistré au travers de 'window.addEventListener("load", ...)'
- Dans ce code, tu déclares différents éléments dont 'buttonNotation'.
- Tu enregistres du code qui sera déclenché quand l'utilisateur cliqueras sur ce bouton : 'buttonNotation.addEventListener("click",...)'
--- Dans ce code, tu charges ton formulaire, en asynchrone : 'xmlhttp.open(...,true)', quand ta requête AJAX reçoie une réponse correcte (xmlhttp.readyState==4 && xmlhttp.status=="200") tu ajoutes ton formulaire à ta page 'formulaire.innerHTML=xmlhttp.responseText' le DOM est disponible. (qu'essaies tu de faire avec 'titre.appendChild(formulaire)' ?)

Autrement dit : le DOM de ton formulaire ne sera disponible qu'après que ta page ait été chargée, ET que quelqu'un ait cliqué sur le bouton 'buttonNotation' ET que tu auras reçu la réponse correcte à la requête AJAX (quand ? ça en asynchrone ...)

Mais si on continue dans le code de la gestion de l'événement 'load' sur l'objet 'window' :

- tu déclares un deuxième gestionnaire d'événement sur 'buttonNotation.addEventListener('click',...)' où tu rends le formulaire visible. Le formulaire ? quel formulaire ? pas de déclaration ni d'initialisation de la variable formulaire dans le contexte dans lequel elle est utilisée, ni dans le contexte parent. Ah. Problème.
- plus loin, tu déclares un gestionnaire d'événement sur 'formulaire.addEventListener('load',...)' où tu ... hep! formulaire ? quel formulaire ? etc. Et aussi, l'événement 'load' se produit-il sur l'élément auquel tu ajoutes le gestionnaire ?

Donc, je reprends : tester, tester, tester et n'ajouter de la complexité que pas à pas.
Le chargement de ton formulaire te pose un problème ?
- écris un page de test de son chargement et seulement de ça.
Tu as du mal avec l'asynchrone ?
- commence avec une version synchrone 'xmlhttp.open(...,false)'

**Incognito87** · 09/12/2014, 15h58

Je travaille sur mon erreur mais...je ne trouve pas la solution...

Tout se passe comme je le souhaite, l'utilisateur clique sur le formulaire le formulaire est chargé puis affiché...

Ma console m'indique bien que le DOM est chargé , grâce a l'onglet éléments, je vois toutes les balises de mon formulaire dont la balise select avec l'id sel (après avoir cliquer sur le bouton notation)...

Mais impossible de charge le "sel"...qui me renvoit un null...

Faut t'il recharger mon dom (window.onload) pour récupérer mon DOM aprés avoir afficher mon formulaire ?

Que faire ?

**lysandro** · 09/12/2014, 17h19

Poste la dernière version de ton code

**Incognito87** · 09/12/2014, 18h05

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
window.addEventListener("load", function(event) {
 /*Création du titre*/
 
	var titre=document.createElement('div');
	titre.innerHTML='Convertisseur de note musicale ';
 
	document.body.appendChild(titre);
 
/*Création du bouton Notation*/	
	var buttonNotation=document.createElement('button');
		buttonNotation.value="Notation";
		buttonNotation.name="Notation";
		buttonNotation.innerHTML="Notation";
 
	titre.appendChild(buttonNotation);
 
 
/*Création et apparition du bouton Close*/
			var buttonClose=document.createElement('button');
			buttonClose.value="Close";
			buttonClose.name="Close";
			buttonClose.innerHTML="Close";
			buttonClose.style.display="none";
 
 
/*requéte AJAX formulaire*/
buttonNotation.addEventListener('click',function(event){
(function(){
	var fonctionFormulaire={
		init:function(){
 
			/*Disparition du bouton Notation et apparition du bouton Close*/
			buttonNotation.style.display="none";
			buttonClose.style.display="block";
 
			titre.appendChild(buttonClose);
 
			event.preventDefault();
 
			var formulaire=document.getElementById('formulaire');	
 
			var xmlhttp=new XMLHttpRequest();
 
				xmlhttp.addEventListener('readystatechange',function(event){
 
					if(xmlhttp.readyState==4){
						if(xmlhttp.status=="200"){
							var formulaire=document.getElementById('formulaire');
							formulaire.innerHTML=xmlhttp.responseText;	
							titre.appendChild(formulaire);
						}
					else
						{
							alert('error code'+xmlhttp.status+':'+xmlhttp.statusText);
						}
					}
			    });			
			xmlhttp.open("GET","formulaire.php",true);
			xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded; charset=UTF-8");
			xmlhttp.send();
						var formulaire=document.getElementById('formulaire');
			alert(formulaire);
			var sel=document.getElementById('sel');
 
			sel.addEventListener('change',function(event){
			var noteSelected=sel.options[sel.selectedIndex].value;
 
			if (noteSelected!=""){
 
 
			event.preventDefault();
 
			var noteSelected=sel.options[sel.selectedIndex].value;
 
			alert(noteSelected);
 
			var xmlhttp=new XMLHttpRequest();
 
				xmlhttp.addEventListener('readystatechange',function(event){
 
					if(xmlhttp.readyState==4){
						if(xmlhttp.status=="200"){
 
							var message=document.getElementById('message');
							message.innerHTML=xmlhttp.responseText;
 
						}
					else
						{
							alert('error code'+xmlhttp.status+':'+xmlhttp.statusText);
						}
					}
			    });
 
			xmlhttp.open("POST","index.php",true);
			xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded; charset=UTF-8");
			xmlhttp.send("noteSelected="+noteSelected);
			}
			});
			}}
		fonctionFormulaire.init();
 
	})()
});
 
/*Disparition du formulaire, du bouton close et apparition du bouton notation*/
			buttonClose.addEventListener('click',function(event){
			formulaire.style.display="none";
			buttonNotation.style.display="block";
			buttonClose.style.display="none";
 
			titre.appendChild(buttonNotation);
			});
 
/*Réapparition du formulaire aprés un clic sur le bouton Notation*/
buttonNotation.addEventListener('click',function(event){
			var formulaire=document.getElementById('formulaire');
			formulaire.style.display="block";
			});
 
			});

**lysandro** · 09/12/2014, 19h09

A partir du dernier code posté.

1ère chose à faire :
supprimer toutes les lignes var formulaire=document.getElementById("formulaire");
ajouter au même niveau et après ou avant

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
var titre=document.createElement('div');
...
var buttonNotation=document.createElement('button');
...
var buttonClose=document.createElement('button');
...

la ligne

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

var formulaire=document.getElementById("formulaire");

Maintenant ton problème ...

Autrement dit : le DOM de ton formulaire ne sera disponible qu'après que ta page ait été chargée, ET que quelqu'un ait cliqué sur le bouton 'buttonNotation' ET que tu auras reçu la réponse correcte à la requête AJAX (quand ? ça en asynchrone ...)

C'était pas clair apparement.

Comme ta requête de chargement de ton formulaire est asynchrone, tu ne sais pas à quel moment ton DOM sera disponible. Sauf dans le traitement de la réponse de la requête asynchrone, soit :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
          ...
          xmlhttp.addEventListener('readystatechange',function(event){
            if(xmlhttp.readyState==4){
              if(xmlhttp.status=="200"){
                formulaire.innerHTML=xmlhttp.responseText;
                /*
                ** DOM DOM DOM dispo, qui veut du DOM ?
                */
                titre.appendChild(formulaire);
              }
              else {
                alert('error code'+xmlhttp.status+':'+xmlhttp.statusText);
              }
            }
          });

Ce que j'essayais de te dire dans

--- Dans ce code, tu charges ton formulaire, en asynchrone : 'xmlhttp.open(...,true)', quand ta requête AJAX reçoie une réponse correcte (xmlhttp.readyState==4 && xmlhttp.status=="200") tu ajoutes ton formulaire à ta page 'formulaire.innerHTML=xmlhttp.responseText' le DOM est disponible.

A ce moment là, à cet endroit là, tu sais que var sel = document.getElementById("sel"); sera non null.
C'est le moment pour l'utiliser :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
            ...
            xmlhttp.addEventListener('readystatechange',function(event){
            if(xmlhttp.readyState==4){
              if(xmlhttp.status=="200"){
                formulaire.innerHTML=xmlhttp.responseText;  
                titre.appendChild(formulaire);
 
                var sel=document.getElementById('sel');
                sel.addEventListener('change',function(event){
	          ...
                });
              }
              else {
                alert('error code'+xmlhttp.status+':'+xmlhttp.statusText);
              }
            }
          });

Et une fois que ça fonctionnera tu pourras essayer d'externaliser la mise en place de l'eventListener dans une fonction que tu appelleras du même endroit.

**lysandro** · 09/12/2014, 23h20

Bon, je me suis peut-être planté, tu me diras. Mon environnement de test étant assez ancien : l'événement 'load' (onload) ne se déclenche pas sur un div. Mais on peut le simuler, ce qui permet de garder ta structure de code initiale, c'est à dire avec le gestionnaire d'évènement 'load' de 'formulaire' dans le code principal :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
          ...
          xmlhttp.addEventListener('readystatechange',function(event){
            if(xmlhttp.readyState==4){
              if(xmlhttp.status=="200"){
                formulaire.innerHTML=xmlhttp.responseText;
                titre.appendChild(formulaire);
              // on crée l'évènement qu'on dispatch sur 'formulaire'
                var evt = document.createEvent("Event");
                evt.initEvent("load",true,false);
                formulaire.dispatchEvent(evt);
              }
              else {
                alert('error code'+xmlhttp.status+':'+xmlhttp.statusText);
              }
            }
          });

edit: Finalement, je ne suis plus bon à nibe, trop longtemprs que j'ai pas joué avec ça. Il vaut mieux écrire :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
          ...
          xmlhttp.addEventListener('readystatechange',function(event){
            if(xmlhttp.readyState==4){
              if(xmlhttp.status=="200"){
                formulaire.innerHTML=xmlhttp.responseText;
                titre.appendChild(formulaire);
              // on crée l'évènement qu'on dispatch sur 'formulaire'
                window.setTimeout(function(){
                  var evt = document.createEvent("Event");
                  evt.initEvent("load",false,false);
                  formulaire.dispatchEvent(evt);
                },0);
              }
              else {
                alert('error code'+xmlhttp.status+':'+xmlhttp.statusText);
              }
            }
          });

Deuxième argument de evt.initEvent(...) à false, ça évite le propagation. Le tout déclenché, avec window.setTimeout(...,0), après qu'on soit sorti de la gestion de l'événement readystatechange, histoire de limiter une réentrance éventuelle.

**Incognito87** · 10/12/2014, 11h17

Merci, je commence a comprendre et j'ai enfin pu récupérer mon dom quand il faut...je suis sur la bonne piste...

**Incognito87** · 10/12/2014, 11h52

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
window.addEventListener("load", function(event) {
 /*Création du titre*/
 
	var titre=document.createElement('div');
	titre.innerHTML='Convertisseur de note musicale ';
 
	document.body.appendChild(titre);
 
/*Création du bouton Notation*/	
	var buttonNotation=document.createElement('button');
		buttonNotation.value="Notation";
		buttonNotation.name="Notation";
		buttonNotation.innerHTML="Notation";
 
	titre.appendChild(buttonNotation);
 
 
/*Création et apparition du bouton Close*/
			var buttonClose=document.createElement('button');
			buttonClose.value="Close";
			buttonClose.name="Close";
			buttonClose.innerHTML="Close";
			buttonClose.style.display="none";
 
 
/*requéte AJAX formulaire*/
buttonNotation.addEventListener('click',function(event){
(function(){
	var fonctionFormulaire={
		init:function(){
 
			/*Disparition du bouton Notation et apparition du bouton Close*/
			buttonNotation.style.display="none";
			buttonClose.style.display="block";
 
			titre.appendChild(buttonClose);
 
			event.preventDefault();
 
			var formulaire=document.getElementById('formulaire');	
 
			var xmlhttp=new XMLHttpRequest();
 
				xmlhttp.addEventListener('readystatechange',function(event){
 
					if(xmlhttp.readyState==4){
						if(xmlhttp.status=="200"){
							var formulaire=document.getElementById('formulaire');
							formulaire.innerHTML=xmlhttp.responseText;	
							titre.appendChild(formulaire);
							var sel=document.getElementById('sel');
 
							sel.addEventListener('change',function(event){
 
							xmlhttp.open("POST",form.action,true);
							xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded; charset=UTF-8");
							xmlhttp.send("noteSelected="+form.note.value);
 
				});
						}
					else
						{
							alert('error code'+xmlhttp.status+':'+xmlhttp.statusText);
						}
					}
			    });			
			xmlhttp.open("GET","formulaire.php",true);
			xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded; charset=UTF-8");
			xmlhttp.send();
 
			}
 
			}
		fonctionFormulaire.init();
 
	})()
});
 
/*Disparition du formulaire, du bouton close et apparition du bouton notation*/
			buttonClose.addEventListener('click',function(event){
			formulaire.style.display="none";
			buttonNotation.style.display="block";
			buttonClose.style.display="none";
 
			titre.appendChild(buttonNotation);
			});
 
/*Réapparition du formulaire aprés un clic sur le bouton Notation*/
buttonNotation.addEventListener('click',function(event){
			var formulaire=document.getElementById('formulaire');
			formulaire.style.display="block";
			});
 
});

Voila tout marche comme je le souhaite, mais une erreur apparait: sel.addEventListener('change',function(event){ : Uncaught TypeError: Cannot read property 'addEventListener' of nullcode.js:53 (anonymous function)....

**lysandro** · 10/12/2014, 14h32

Promenons nous ... (à lire avec le code à coté sur l'air de 'Promenons nous dans les bois')

[Interface utilisateur]

- navigation vers http://.../.../index.php

[Dans le code]

- Evènement 'load' reçu par 'windows'
- Création 'titre', 'buttonNotation', 'buttonClose'
- Ajout d'un listener pour l'événement 'click' sur 'buttonNotation'
- Ajout d'un listener pour l'événement 'click' sur 'buttonClose'
- Ajout d'un listener pour l'événement 'click' sur 'buttonNotation'

[Retour à l'interface utilisateur]

- clic sur 'buttonNotation'

[Retour au code]

- Evènement 'click' reçu par 'buttonNotation'
- Appel de 'fonctionFormulaire.init()'
-- Création d'une requête XHR 'xmlhttp'
-- Ajout d'un listener pour l'évènement 'readystatechange' sur 'xmlhttp'
-- Exécution de la requête en asynchrone pour 'formulaire.php'

[Retour à l'interface utilisateur]

- ...

[Retour au code]

- Evènement 'readystatechange' reçu par 'xmlhttp' (on ne considère que le dernier)
- Ajout du contenu de la réponse comme contenu de 'formulaire'
- Récupération du 'select' par son Id 'sel'
- Ajout d'un listener pour l'évènement 'change' de 'sel'

[Retour à l'interface utilisateur]

- Sélection d'une note dans la liste (select)

[Retour au code]

- Evènement 'change' reçu par 'sel'
- Exècution de la requête en asynchrone pour 'index.php' (valeur de 'form.action')
(un indice: la requête ? quelle requête ?)

[Retour à l'interface utilisateur]

- ...

[Retour au code]

- Evènement 'readystatechange' reçu par 'xmlhttp' (on ne considère que le dernier)
- Ajout du contenu de la réponse comme contenu de 'formulaire'
(que contient la réponse ? bin index.php ! index.php contient le formulaire ? bin non)
- Récupération du 'select' par son Id 'sel'
(oups, on vient de l'écraser juste avant)
- Ajout d'un listener pour l'évènement 'onchange' de 'sel'
(TypeError: Cannot read ...)

Résumé : tu réutilises ta requête XHR précedemment utilisée pour charger ton formulaire mais tu n'as pas changé le gestionnaire pour l'événement 'readystatechange' associé. Tu déroules donc le même code, qui t'écrases ton formulaire.

**Incognito87** · 10/12/2014, 15h39

Je comprends bien mon erreur d'écrasage...

Je viens de tester des trucs mais je ne comprends pas comment :

changé le gestionnaire pour l'événement 'readystatechange' associé

...

**lysandro** · 10/12/2014, 16h01

Envoyé par Incognito87

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
			...
			var sel=document.getElementById('sel');
 
			sel.addEventListener('change',function(event){
				var noteSelected=sel.options[sel.selectedIndex].value;
 
				if (noteSelected!=""){
 
					event.preventDefault();
 
					var noteSelected=sel.options[sel.selectedIndex].value;
 
					alert(noteSelected);
 
					var xmlhttp=new XMLHttpRequest();
 
					xmlhttp.addEventListener('readystatechange',function(event){
 
						if(xmlhttp.readyState==4){
							if(xmlhttp.status=="200"){
 
								var message=document.getElementById('message');
								message.innerHTML=xmlhttp.responseText;
 
							}
							else
							{
								alert('error code'+xmlhttp.status+':'+xmlhttp.statusText);
							}
						}
					});
 
					xmlhttp.open("POST","index.php",true);
					xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded; charset=UTF-8");
					xmlhttp.send("noteSelected="+noteSelected);
				}
 
			});
			...

**Incognito87** · 10/12/2014, 17h21

Voila le code final est:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
window.addEventListener("load", function(event) {
 /*Création du titre*/
 
	var titre=document.createElement('div');
	titre.innerHTML='Convertisseur de note musicale ';
 
	document.body.appendChild(titre);
 
/*Création du bouton Notation*/	
	var buttonNotation=document.createElement('button');
		buttonNotation.value="Notation";
		buttonNotation.name="Notation";
		buttonNotation.innerHTML="Notation";
 
	titre.appendChild(buttonNotation);
 
 
/*Création et apparition du bouton Close*/
			var buttonClose=document.createElement('button');
			buttonClose.value="Close";
			buttonClose.name="Close";
			buttonClose.innerHTML="Close";
			buttonClose.style.display="none";
 
 
/*requéte AJAX formulaire*/
buttonNotation.addEventListener('click',function(event){
(function(){
	var fonctionFormulaire={
		init:function(){
 
			/*Disparition du bouton Notation et apparition du bouton Close*/
			buttonNotation.style.display="none";
			buttonClose.style.display="block";
 
			titre.appendChild(buttonClose);
 
			event.preventDefault();
 
 
			var xmlhttp=new XMLHttpRequest();
 
				xmlhttp.addEventListener('readystatechange',function(event){
 
					if(xmlhttp.readyState==4){
						if(xmlhttp.status=="200"){
 
							var formulaire=document.getElementById('formulaire');
							formulaire.innerHTML=xmlhttp.responseText;	
							titre.appendChild(formulaire);
 
 
							var sel=document.getElementById('sel');
 
			sel.addEventListener('change',function(event){
				var noteSelected=sel.options[sel.selectedIndex].value;
 
				if (noteSelected!=""){
 
					event.preventDefault();
 
					var noteSelected=sel.options[sel.selectedIndex].value;
 
					var xmlhttp=new XMLHttpRequest();
 
					xmlhttp.addEventListener('readystatechange',function(event){
 
						if(xmlhttp.readyState==4){
							if(xmlhttp.status=="200"){
 
								var message=document.getElementById('message');
								message.innerHTML=xmlhttp.responseText;
 
							}
							else
							{
								alert('error code'+xmlhttp.status+':'+xmlhttp.statusText);
							}
						}
					});
 
					xmlhttp.open("POST","index.php",true);
					xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded; charset=UTF-8");
					xmlhttp.send("noteSelected="+noteSelected);
				}
 
			});
						}
					else
						{
							alert('error code'+xmlhttp.status+':'+xmlhttp.statusText);
						}
					}
			    });			
			xmlhttp.open("GET","formulaire.php",true);
			xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded; charset=UTF-8");
			xmlhttp.send();
			}
			}
		fonctionFormulaire.init();
 
	})()
});
 
/*Disparition du formulaire, du bouton close et apparition du bouton notation*/
			buttonClose.addEventListener('click',function(event){
			formulaire.style.display="none";
			buttonNotation.style.display="block";
			buttonClose.style.display="none";
 
			titre.appendChild(buttonNotation);
			});
 
/*Réapparition du formulaire aprés un clic sur le bouton Notation*/
buttonNotation.addEventListener('click',function(event){
			var formulaire=document.getElementById('formulaire');
			formulaire.style.display="block";
			});
 
});

Tout marche correctement, je n'ai plus qu'a indenter mon code correctement...

A un moment donnée, je suis passé tout proche de la réponse...

Merci a Lysandro pour sa patience...

**lysandro** · 10/12/2014, 18h26

You're welcome.

Ce n'est que ton code un peu réorganisé finalement, c'est bien.

Si tu peux prendre l'habitude de dérouler ton code pour comprendre ce qui se passe, et tester unitairement ce que tu ne comprends pas, la vie sera plus belle.

je n'ai plus qu'a indenter mon code correctement...

je me demandais pourquoi j'étais obligé de me retaper l'indentation à chaque fois !