Discussion :

[monlou]

Bonjour.

Après lecture de 2 tutos ici sur les listes liées ajax, je suis parvenu a en faire rouler une dans mon formulaire mais comme je dois la réutiliser une seconde fois dans ce meme formulaire, je me rends compte que j'ai des améliorations a faire sur mon javascript pour faire rouler la deuxième.

il s'agit en fait que je dois appeler les villes et provinces de départ pour une première fois et ensuite rappeler les mêmes villes et provinces pour l'arrivée.

Est-ce possible que quelqu'un puisse m'indiquer comment y parvenir?

en fait, dans le deuxième rappel , les provinces fonctionnent mais ce sont les villes qui ne fonctionnent pas

dans le 2e rappel, j'ai changé le nom de ma div <div id='villes2' mais rien ne change

javaScript

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
<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 go(){
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// 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){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('villes').innerHTML = leselect;
 
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxVilles.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 la province
				sel = document.getElementById('provinces');
				ProvinceID = sel.options[sel.selectedIndex].value;
				xhr.send("province_id="+ProvinceID);
			}
		</script>

voici le code pour le select 'villes2'

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
<p>Destination - Choisissez une province :
 
      <select name="provinces2" id="provinces2">
        <option value='-1'>Choisir</option>
					<?php
						mysql_connect("localhost","root","");
						mysql_select_db("trajetel");
						$res = mysql_query("SELECT * FROM provinces ORDER BY nom");
						while($row = mysql_fetch_assoc($res)){
							echo "<option value='".$row["id"]."'>".$row["nom"]."</option>";
						}
					?>
 
      </select> 
    <span id="loader2" style="display: none;"><img src="../images/loader.gif" alt="loading2" /></span>
    </p>
  </p>
  <p>  Choisisez une ville d'arrivée :
   <div id='villes2' style='display:inline'>
				<select name='villes2'>
					<option value='-1'>Choisir une ville : </option>
				</select>
				</div>

merci

[E.Bzz]

Bonjour,
je ne sais pas quel navigateur tu utilises, ni comment tu as fait pour les 2 premières listes, mais tu as ici ce que IE va considérer comme une erreur

Code :

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

1
2
3
4
5
   <div id='villes2' style='display:inline'>
				<select name='villes2'>
					<option value='-1'>Choisir une ville : </option>
				</select>
				</div>

Un id ne doit pas correspondre au name d'un autre élément : ça embrouille IE qui confond name et id.
Utilise par exemple div_villes2 et liste_villes2 ....

Remarque :
il est possible que ça ne soit pas l'erreur à l'origine de ton problème, mais celle-ci te bloquera de toutes façons sous IE ...

A+

[E.Bzz]

Sinon, concernant les adaptations, il faut que tu ajoutes 2 paramètres à ta fonction go() :

• le premier contiendra l'id de la 1° liste (les provinces) à utiliser comme critère
• le second contiendra l'id de la liste à alimenter (plutôt l'id de son conteneur)

Dans le premier cas tu devrais :

Code :

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

onchange="go('provinces','villes');"

et dans le second

Code :

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

onchange="go('provinces2','div_villes2');"

Dans la fonction, il te suffit de remplacer les identifiants "en dur" par le nouveau paramètre correspondant ...

A+

[monlou]

Merci pour ta réponse mais je ne comprends pas vraiment tes explications et la syntaxes de tes propositions

onchange="go('provinces2','div_villes2');"

je ne comprends pas comment et ou mettre ce code dans mon script

et ici

Un id ne doit pas correspondre au name d'un autre élément : ça embrouille IE qui confond name et id.
Utilise par exemple div_villes2 et liste_villes2 ....

alors, j'ai pense rajouter une seconde fonction go a mon script pour les adapter au nouveaux id mais la ya plus rien qui marche

voici l'état actuel de mon script

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
<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 go(){
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// 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){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('villes').innerHTML = leselect;
 
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxVilles.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 la province
				sel = document.getElementById('provinces');
				ProvinceID = sel.options[sel.selectedIndex].value;
				xhr.send("province_id="+ProvinceID);
			}
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function go(){
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// 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){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('villes2').innerHTML = leselect;
 
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxVilles.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 la province
				sel = document.getElementById('provinces2');
				ProvinceID = sel.options[sel.selectedIndex].value;
				xhr.send("provinces2_id="+ProvinceID);
			}
		</script>

[E.Bzz]

Je ne comprends pas bien ce que tu ne comprends pas
Tu avais 2 liste avec des id 'provinces' et 'villes'.
Si tu veux en gérer deux autres, il leur faut des id différents => 'provinces2' et 'villes2'.
Ta fonction go() utilise actuellement des id "en dur". Ex :

Code :

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

sel = document.getElementById('provinces');

Je te propose juste de remplacer ces valeurs par des paramètres de ta fonction.

alors, j'ai pense rajouter une seconde fonction go a mon script pour les adapter au nouveaux id mais la ya plus rien qui marche

Ben oui, tu ne peux pas avoir 2 fonctions avec le même nom.
Appelle-la au moins go2()

Mais les paramètres seraient préférables ...

A+

[monlou]

mais oui j'ai compris pour les noms de id = villes2 et provinces2, comme tu a pu remarquer dans mon 2e script, je les avais changé

suite a ta remarque sur fonction go()
j'ai modifié le nom de fonction go2() pour le 2e rappel

en ce qui concerne ta recommandation sur les parametres, excuse mon ignorance mais j'aimerais avoir un exemple de ce que tu veux dire

je crois qu'il ne manque plus grand chose pour faire fonctionner la totalité du script maintenant car seulement 'villes2' ne fonctionne pas

aussi tu m'as indiquer que je devrais changer le name de mes label si j'ai bien compris pour les interprétations de I.E mais j'ai peur qu'en changeant le name, le javascript ne reconnaisse encore moins mes label.

voici ou j'en suis rendu avec mon script

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
 Destination - Choisissez une province :
 
      <select name="provinces2" id="provinces2">
        <option value='-1'>Choisir</option>
					<?php
						mysql_connect("localhost","root","");
						mysql_select_db("trajetel");
						$res = mysql_query("SELECT * FROM provinces ORDER BY nom");
						while($row = mysql_fetch_assoc($res)){
							echo "<option value='".$row["id"]."'>".$row["nom"]."</option>";
						}
					?>
 
      </select> </p>
    <span id="loader2" style="display: none;"><img src="../images/loader.gif" alt="loading2" /></span>
 
  <p><span id="spryselect2"> Choisisez une ville d'arrivée : <div id='villes2' style='display:inline'>
    <select name='villes2'>
      <option value='-1'>Choisir une ville : </option>
    </select>
    </div>

javascript

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
function go2(){
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// 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){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('villes2').innerHTML = leselect;
 
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxVilles.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 la province
				sel = document.getElementById('provinces2');
				ProvinceID = sel.options[sel.selectedIndex].value;
				xhr.send("provinces2_id="+ProvinceID);
			}
		</script>