[AJAX] Ajax XMLHttpRequest

Version imprimable

bonjour,
je vous explique mon problème, j'ai ce code

Code:

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
 
<script type='text/javascript'>
			function getXhr(){
                var xhr = null;
				if(window.XMLHttpRequest){ // Firefox et autres
				   xhr = new XMLHttpRequest(); 
 
				}
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
							xhr = new ActiveXObject("Msxml2.XMLHTTP");
						} catch (e) {
							xhr = new ActiveXObject("Microsoft.XMLHTTP");
						}
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                            return xhr;
			}
 
 
 
 
			function affichersousoriginerdv(){
 
				var xhr = getXhr();
 
 
				xhr.onreadystatechange = function(){
				//	alert(xhr.readyState);
 
					if(xhr.readyState == 4 && xhr.status == 200){
						di = document.getElementById('sousrdv');
						di.style.display = 'inline';	
						di.innerHTML = xhr.responseText;
					}
				}
 
 
				xhr.open("POST","functions.class.php",true);
 
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 
				id_origine_rdv = document.getElementById('origine_rdv').options[document.getElementById('origine_rdv').selectedIndex].value;
 
				xhr.send("origine_rdv="+id_origine_rdv);
 
			}

Au niveau de la page functions.class.php
je récupère "origine_rdv" tout est bon et je crée un

Code:

1
2
3
4
5
 
<select name="sousrdv" id="sousrdv" onchange="afficher();">
code php(selection des option a partir de la base de donné)  
<option value="-1" selected="selected">----</option>
</select>

Mon problème est que la fonction afficher qui a le même role que affichersousoriginerdv() à part que la page n'est pas la même ne fonctionne pas.
Même si je fais alert(xhr.readyState);
ça donne rien
Aidez moi SVP
Merci

04/10/2010, 14h49
andry.aime

Bonjour,

Citation:

di = document.getElementById('sousrdv');
di.style.display = 'inline';
di.innerHTML = xhr.responseText;

1- Chez plusieurs navigateurs, "select" ne supporte pas innerHTML.
2- Tu Montres nous la fonctions affiche() qui ne fonctionne pas, comment tu as généré ton select avec ajax et le code HTML généré de la page.

A+.

Réponse

Bon voila ce que j'ai en tous:
1-Le code du script dans la page index.php

Code:

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
 
<script type='text/javascript'>
			function getXhr(){
                var xhr = null;
				if(window.XMLHttpRequest){ // Firefox et autres
				   xhr = new XMLHttpRequest(); 
 
				}
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
							xhr = new ActiveXObject("Msxml2.XMLHTTP");
						} catch (e) {
							xhr = new ActiveXObject("Microsoft.XMLHTTP");
						}
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                            return xhr;
			}
 
 
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function affichersousoriginerdv(){
 
				var xhr = getXhr();
 
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
				//	alert(xhr.readyState);
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						di = document.getElementById('sousrdv');
						di.style.display = 'inline';	
						di.innerHTML = xhr.responseText;
					}
				}
// Ici on va voir comment faire du post
				xhr.open("POST","functions.class.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'auteur
				id_origine_rdv = document.getElementById('origine_rdv').options[document.getElementById('origine_rdv').selectedIndex].value;
				//alert(idauteur);
				xhr.send("origine_rdv="+id_origine_rdv);
 
			}
 
function afficher(){
 
				var xhr = getXhr();
 
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
				//	alert(xhr.readyState);
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						di2 = document.getElementById('sousrdv2');
						di2.style.display = 'inline';	
						di2.innerHTML = xhr.responseText;
					}
				}
// Ici on va voir comment faire du post
				xhr.open("POST","functions2.class.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'auteur
				sousrdv = document.getElementById('sousrdv').options[document.getElementById('sousrdv').selectedIndex].value;
				//alert(idauteur);
				xhr.send("sousrdv ="+id_sousrdv );
 
			}
<script>

2-La page index.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<select name="origine_rdv" id="origine_rdv" onchange="affichersousoriginerdv();afficherresultatrdv(this.value);">
            <option value="-1" selected="selected">----</option>
            <?php
do {  
?>
            <option value="<?php echo $row_selection_formualire['id_formulaire']?>"><?php echo htmlentities($row_selection_formualire['libelle_formualaire'])?></option>
            <?php
} while ($row_selection_formualire = mysql_fetch_assoc($selection_formualire));
  $rows = mysql_num_rows($selection_formualire);
  if($rows > 0) {
      mysql_data_seek($selection_formualire, 0);
          $row_selection_formualire = mysql_fetch_assoc($selection_formualire);
  }
?>
        </select>
 
<span id="sousrdv">
          <select name="sousrdv" id="sousrdv" style="display:none;" onchange="afficher()">
          <option value="-1" selected="selected">----</option>
</select>

3- code de lapage functions.class.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
if(isset($_REQUEST["origine_rdv"])){
etc ................
<select name="sousrdv" id="sousrdv" onchange="afficher()">
  <option value="-1" selected="selected">----</option>
  <?php
do {  
$libelle=  explode(',',$row_selection_sousorignerdv['libelle_formualaire']);
$libelle[1];
?>
  <option value="<?php echo $row_selection_sousorignerdv['id_formulaire']?>"><?php echo htmlentities($row_selection_sousorignerdv['libelle_formualaire']);?></option>
  <?php
} while ($row_selection_sousorignerdv = mysql_fetch_assoc($selection_sousorignerdv));
  $rows = mysql_num_rows($selection_sousorignerdv);
  if($rows > 0) {
      mysql_data_seek($selection_sousorignerdv, 0);
          $row_selection_sousorignerdv = mysql_fetch_assoc($selection_sousorignerdv);
  }
?>
</select>

4- Jusqu'au la ca marche nikel.

Mais quand je veux appeler la fonction afficher rien ne se passe
Meme une alert sur l'état de lobjet XMLHTTP , il n y a pas.

MErci

04/10/2010, 17h20
andry.aime
Citation:

sousrdv = document.getElementById('sousrdv').options[document.getElementById('sousrdv').selectedIndex].value;
//alert(idauteur);
xhr.send("sousrdv ="+id_sousrdv );
Code:

1 2 3 sousrdv = document.getElementById('sousrdv').options[document.getElementById('sousrdv').selectedIndex].value; //alert(idauteur); xhr.send("sousrdv ="+sousrdv);
Citation:

<span id="sousrdv">
<select name="sousrdv" id="sousrdv"

Un id doit être unique dans un document.