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.