[AJAX] listes liées AJaX rappeler 2 fois dans le meme formulaire

**monlou** · 30/05/2010, 07h20

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** · 01/06/2010, 10h57

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** · 01/06/2010, 11h03

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** · 03/06/2010, 17h16

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** · 03/06/2010, 18h39

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.

Envoyé par monlou

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** · 03/06/2010, 19h19

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>

**E.Bzz** · 04/06/2010, 11h03

Essaye avec

Code html :

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

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

et dans go2()

Code :

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

document.getElementById('div_villes2').innerHTML = leselect;

A+

**monlou** · 04/06/2010, 16h50

bonjour E.Bzz

j'ai essayé ton script mais ca change rien, c'est le statu quo. 'villes2' n'embarque pas.
j'ai scrupuleusement observer ton code , j'ai meme essayer avec des guillemets a la place d'apostrophe

Code :

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

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

j'utilise présentement firefox comme navigateur mais de toute facon , le minimum qu'un script devrait fonctionner c'est avec fireox et I.E

y'a-t-il une autre option?

**devyan** · 04/06/2010, 17h06

Bonjour,

Un doute me viens en regardant cette conversation...

Est-ce que le code PHP de "ajaxVilles.php" a été modifié à un moment ou un autre depuis le début de cette conversation ?
Personnellement je ne vois pas pourquoi il l'aurait été et c'est bien de là que proviendrait le problème...

Si comme je le pense il n'a pas été changé il faut toujours lui envoyer "provinces_id=x" et pas "province2_id=x" bien que x corresponde à l'id de provinces2.

devyan.

**E.Bzz** · 04/06/2010, 17h09

Envoyé par monlou

y'a-t-il une autre option?

Quelques vérifications d'abord

la page PHP appelée par Ajax renvoie-t-elle bien les tags <select>et </select> en plus des <option> ?
Qu'obtiens-tu comme résultat si tu entres l'url (complète : avec les bons paramètres) dans la barre d'adresse du nav ?

Pour 2) ça te permets de voir exactement ce que te renvoie Ajax (en faisant "afficher le code source de la page"). Tu trouveras peut être un message d'erreur du serveur, par exemple ...

A+

**E.Bzz** · 04/06/2010, 17h11

Envoyé par devyan

Si comme je le pense il n'a pas été changé il faut toujours lui envoyer "provinces_id=x" et pas "province2_id=x" bien que x corresponde à l'id de provinces2.

Exact : il n'a jamais été question de modifier les identifiants des paramètres de l'url

A+

**monlou** · 04/06/2010, 17h17

non pas du tout, il n'a pas ete changé

revoici le code

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
	echo "<select name='villes'>";
	if(isset($_POST["province_id"])){
		mysql_connect("localhost","root","");
		mysql_select_db("trajetel");
		$res = mysql_query("SELECT id,nom FROM villes 
			WHERE province_id=".$_POST["province_id"]." ORDER BY nom");
		while($row = mysql_fetch_assoc($res)){
			echo "<option value='".$row["id"]."'>".$row["nom"]."</option>";
		}
	}
	echo "</select>";
?>

mais firebug m'envoie ce message
Échec du chargement de la source pour: http://www.developpez.net/forums/new...te=1&p=5260410

**monlou** · 04/06/2010, 17h39

# a page PHP appelée par Ajax renvoie-t-elle bien les tags <select>et </select> en plus des <option> ?
# Qu'obtiens-tu comme résultat si tu entres l'url (complète : avec les bons paramètres) dans la barre d'adresse du nav ?

j'obtiens une petite barre de select vide
j'ai essayé aussi avec :

Code :

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

1
2
3
sel = document.getElementById('provinces2'); et aussi ('provinces')
				ProvinceID = sel.options[sel.selectedIndex].value;
				xhr.send("provinces_id="+ProvinceID);

**devyan** · 04/06/2010, 17h39

Donc 2 choses :

1/ effectivement il ne faut pas changer le nom du paramètre lors de l'appel ajax.

2/ je vois que l'attribut name du SELECT est en dur dans la réponse AJAX (il va falloir changer ça pour que cela fonctionne

(en plus il n'y a pas d'id)

devyan

**monlou** · 04/06/2010, 17h55

1/ effectivement il ne faut pas changer le nom du paramètre lors de l'appel ajax.

alors, j'ai changé pour :

Code :

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

1
2
3
sel = document.getElementById('provinces');
				ProvinceID = sel.options[sel.selectedIndex].value;
				xhr.send("province_id="+ProvinceID);

2/ je vois que l'attribut name du SELECT est en dur dans la réponse AJAX (il va falloir changer ça pour que cela fonctionne (en plus il n'y a pas d'id)

s'il te plait pourrais tu me dire de quelle facon changer ca?
merci

**devyan** · 04/06/2010, 18h01

Tu peux soit :

1/ solution php : ajouter un paramètre d'appel à ajaxVilles.php dans lequel tu indiques l'id du SELECT. Il te suffit d'utiliser cette valeur dans la construction de la réponse AJAX

2/ solution javascript : parser la réponse AJAX actuelle pour remplacer les name/id par défaut par le bon

Vu que tu as la main sur le code PHP la solution 1/ me semble la plus logique.

devyan.

**monlou** · 04/06/2010, 18h18

oui je comprends maintenant

mais comme j'ai :

Code :

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

<select name='villes' id="villes">

et

Code :

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

<select name="villes2" id="villes2">

de quelle facon, le parametre pourrait -il s'écrire dans php?

Code :

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

1
2
<?php
	echo "<select name='villes>";

**E.Bzz** · 04/06/2010, 19h44

Envoyé par monlou

alors, j'ai changé pour :

Code :

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

1
2
3
sel = document.getElementById('provinces');
				ProvinceID = sel.options[sel.selectedIndex].value;
				xhr.send("province_id="+ProvinceID);

Oui mais du coup tu récupères la provinces de ta première liste "provinces" et non celle de "provinces2" : il ne faut pas confondre l'identifiant (name ou id) de l'objet dans la page et le nom du paramètre dans l'url. Les deux ne sont pas liés ...
Dans go2(), tu devrais donc avoir

Code :

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

sel = document.getElementById('provinces2');

de quelle facon, le parametre pourrait -il s'écrire dans php?

Je pense qu'il faut que tu ajoutes un paramètre supplémentaire dans l'url, afin d'indiquer à PHP si tu es e train de traiter les 2 premières listes ou les 2 suivantes. Ceci afin qu'il puisse générer soit

Code :

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

<select name='villes' id="villes">

soit

Code :

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

<select name='villes2' id="villes2">

suivant le cas ...

Sinon, tu ne dois plus être très loin

A+

**monlou** · 08/06/2010, 05h32

merci, j'ai finalement résolu mon cas
j'ai préféré rajouter une autre page 'ajaxvilles2.php' en l'adaptant a ma fonction go2() dans mon javascript et a mon <select names = 'villes2' id='villes2'>

merci c'est résolu!

j'ai bien aimé ma première expérience d'apprentissage du javascript avec vous tous et je compte me trouver des tutos pour approfondir mes connaissances sur ce langage.