[AJAX] 3 listes attachées ! ID non accessible !

**mims1664** · 29/02/2008, 15h10

Non meme pas !

bon je crois que je vais abandonner et chercher une solution plus simple, l'ajax c'est pour les grands !

Merci pour ton aide et ta patience.

**E.Bzz** · 29/02/2008, 15h20

Envoyé par mims1664

Non meme pas !

Si si !
En tous cas chez moi avec FF.

Actuellement sur onchange elle s' "auto-met à jour" en récupérant visiblement la liste de tous les modèles (toutes marques), alors que les changements (même faux) devraient intervenir sur la 3° ...

A+

**mims1664** · 29/02/2008, 15h48

Whoua mais tu as raison, FF ne réagis pas du tout pareil que IE !! POWWWW

d'ailleurs j'ai retrouvé espoir car j'arrive sous FF a obtenir un résultat satisfaisant !! Wouha !

Par contre sous IE la seconde liste reste vierge. elle ne se remplie pas ... un petit truc sans doute....

**E.Bzz** · 29/02/2008, 15h56

Envoyé par mims1664

Par contre sous IE la seconde liste reste vierge. elle ne se remplie pas ... un petit truc sans doute....

Effectivement (pas testé jusqu'à maintenant).
Pas de problème apparent côté JS.
Peut-être côté serveur ?

A+

**mims1664** · 29/02/2008, 16h30

j'ai testé en local, sur free, et la c'est chez OVH et c'est le même problème,

un petit récapitulatif est sans doute nécéssaire pour le code :

Index.php

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
126
127
128
129
130
131
132
133
134
135
136
137
 
<?
require ("common/Bdd.class.php");
$bdd = new Bdd("common/config.inc.php");
$bdd->connect(); 
?>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="style.css" rel="stylesheet" type="text/css" />
<link href="navigation.css" rel="stylesheet" type="text/css" />
 
<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('mod').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","scripts/agax_listerecherchemodele.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 
				sel = document.getElementById('marque');
				idmarque = sel.options[sel.selectedIndex].value;
 
 
 
				xhr.send("idMarque="+idmarque);
 
			}
 
 
			function gotype(){
				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('ty').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","scripts/agax_listerecherchetype.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 
				sel = document.getElementById('mod');
				idmodele = sel.options[sel.selectedIndex].value;
 
				xhr.send("idModele="+idmodele);
 
			}			
		</script>
 
  </head>
 
  <body>
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><span class="recherchecar">Mon v&eacute;hicule<br />
    </span> 
		<?
 
		$req="SELECT DISTINCT MARQUE  FROM `database` WHERE 1";
		$bdd->setQuery($req);
		$rescar = $bdd->executeQuery();
 
		?>
        <select name="marque" id="marque" title="Constructeurs automobiles" class="rechercheliste"  onchange="go();">
          <option value="-1" selected="selected">Marque</option>
          <?
			 for($i=0;$i<sizeof($rescar);$i++){
				if($rescar[$i][0]!=""){
				 ?>
				  <option  value="<? echo $rescar[$i][0]; ?>" ><? echo stripslashes(nl2br($rescar[$i][0])); ?></option>
				  <?
					}
				}  
			?>
          </select>
 
 
	    <div id='modele' style='display:inline'>
	      <select name="mod" id="mod" title="Modeles automobiles"  class="rechercheliste" OnChange='gotype()'>
	        <option value='-1'>Modèle</option>
	      </select>
	     </div>
 
 
	    <div id='type' style='display:inline'>
	      <select name="ty" id="ty" title="Type automobiles"  class="rechercheliste" >
	        <option value='-1'>Type</option> 
	        </select>
	     </div>	
 
  </td>
  </tr>
</table>
</body>
</html>

agax_listerecherchemodele.php

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
 
if(isset($_POST["idMarque"])){
 
	$idmarque=$_POST["idMarque"];	
 
	$req="SELECT DISTINCT MODELE FROM `database` WHERE MARQUE = '$idmarque' ";
	$bdd->setQuery($req);
	$res = $bdd->executeQuery();
 
 
	for($i=0;$i<sizeof($res);$i++){
			echo "<option value='".stripslashes($res[$i][0])."'>".stripslashes($res[$i][0])."</option>";
		}
}else{
	echo "<option value='-1'>Modèle</option>";
	}

agax_listerecherchetype.php

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
 
<?php
if(isset($_POST["idModele"])){
        
        $idmodele=$_POST["idModele"];   
 
        $req="SELECT DISTINCT TYPE FROM `database` WHERE MODELE = '$idmodele'";
        $bdd->setQuery($req);
        $res = $bdd->executeQuery();
        
        for($i=0;$i<sizeof($res);$i++){
                        echo "<option value='".$res[$i][0]."'>".stripslashes($res[$i][0])."</option>";
                }
        }
?>

Le select ne se remplit que si je met le <select ....>
</select> dans le fichier agax_listerecherchemodele.php

**E.Bzz** · 29/02/2008, 16h40

Envoyé par mims1664

Le select ne se remplit que si je met le <select ....>
</select> dans le fichier agax_listerecherchemodele.php

Effectivement, je comprends pas non plus ...

Penses-tu bien à changer de conteneur dans le script (div/select) suivant si tu envoies ou non le <select></select> dans le responseText ?

A+

**mims1664** · 29/02/2008, 17h06

Envoyé par E.Bzz

Effectivement, je comprends pas non plus ...

Penses-tu bien à changer de conteneur dans le script (div/select) suivant si tu envoies ou non le <select></select> dans le responseText ?

A+

Heuuu j'ai pas bien compris .... LOL

c'est 2 fichier différent et je n'envois pas les <select></select> donc pas de conteneur a modifier vu q'il n'y en a pas ! non ?

**E.Bzz** · 29/02/2008, 17h13

Envoyé par mims1664

Le select ne se remplit que si je met le <select ....>
</select> dans le fichier agax_listerecherchemodele.php

Tu fais visiblement les tests ddans les 2 cas.
Or dans un cas (avec envoi de <select></select>) tu remplis un div, et dans l'autre (<option> uniquement) tu remplis un <select> : le conteneur pour la réponse d'Ajax n'est pas le même ici :

Code :

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

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

Un coup "mod", et un coup "modele" suivant le cas que tu es en train de tester ...

A+

**mims1664** · 01/03/2008, 12h06

Envoyé par E.Bzz

Si tu veux continuer avec innerHTML (au lieu du DOM), essaye plutôt

Code :

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

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

En ne faisant retournées que les options par Ajax. Mieux vaudrait un += d'ailleurs, sinon le onchange ne se déclenchera pas quand il n'y a qu'une option (ex : Aston Martin).
Il te faut aussi modifier la balise <select> (pour y intégrer le onchange, non présent actuellement) ...

A+

Bon, j'ai réussi a obtenir un résultat satisfaisant, il y a toujours ce probleme (précisé ci dessus),il faut que je fasse un +=, pour que la seconde liste lorsqu'il y a un objet déclanche le onchange ...

Ca aussi c'est un truc que je ne connais pas ? que cela signifie ?? += ? j'ai essayer

Code :

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

document.getElementById('mod').innerHTML += leselect;

cela me rajoute un select .?.. LOL

**E.Bzz** · 03/03/2008, 14h18

Envoyé par mims1664

Ca aussi c'est un truc que je ne connais pas ? que cela signifie ?? += ? j'ai essayer

Code :

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

document.getElementById('mod').innerHTML += leselect;

C'est l'équivalent de

Code :

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

document.getElementById('mod').innerHTML = document.getElementById('mod').innerHTML + leselect;

Mais en fait, il vaudrait mieux laisser = et renvoyer toute la liste (y compris "choix non fait") ...

A+

**mims1664** · 04/03/2008, 16h52

Ok super!

je te remercie pour l'aide, les explications et la patience !!!

**Alice_B** · 09/07/2008, 11h28

Salut !

Moi aussi j'aimerais faire 3 listes liées et j'ai un code similaire au tiens (j'avais aussi essayé par rapport au tuto que tu as utilisé). Sauf que moi ça ne fonctionne pas. Quand je change de selection de ma deuxième liste "onchange" ne fonctionne pas alors que je l'ai pourtant ajouté dans ma balise <select>! Comme tu sembles être seul sur ce forum à avoir réussi à faire 3 listes liées j'aimerais que tu jettes un coup d'oeil à mon problème...

voici le code de la page php sur laquelle se trouve les 3 listes :
essai.php:

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
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<?php
 
session_start(); 
 
if (!isset($_SESSION['OK']) and $_SESSION['OK']==''){
 
	include("authentification.php");
 
	}
	else
	{?>
 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>France Association - Ajouter mon Association</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 
 
	   <script type="text/javascript">
	   function textLimit(field, maxlen) {
			if (field.value.length > maxlen) 
			{
			field.value = field.value.substring(0, maxlen);
			alert('Votre texte est trop long!'); 
			}
		}
 
 
			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('div-rubrique').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxRubrique.php",true);
				alert("je passe dans go!");
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, la valeur de ce qu'a selestion l'utilisateur dans la liste catégorie
				sel = document.getElementById('categorie');
				nomCategorie = sel.options[sel.selectedIndex].value;
				xhr.send("nomCategorie="+nomCategorie);
			}
			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('div-srubrique').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","ajaxSRubrique.php",true);
				alert("je passe dans go2!");
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, la valeur de ce qu'a selestion l'utilisateur dans la liste rubrique
				sel = document.getElementById('rubrique');
				nomRubrique = sel.options[sel.selectedIndex].value;
				xhr.send("nomRubrique="+nomRubrique);
			}
 
 
</script>
   </head>
   <body>
		<!-- header-->
 
		<!--CONTENU DE LA PAGE-->
		<div id="contenu">
		<form method="post" name = "formuAjoutAsso" action="" class="formulaire" >
		<!--Les coordonnées de l'association-->
			<div id="coordonneesAdmin">
				<div id="contenuCoordonneeAdmin">					
					<p><label>Catégorie: </label>
				<select name='categorie' id='categorie' style='color:#979797;' onchange='go();'>
					<option value='-1'>Catégorie</option>
					<?
						mysql_connect("", "", ""); // Connexion 
						mysql_select_db(""); // Sélection de la base france-asso
						$res = mysql_query("SELECT DISTINCT categorie FROM associations ORDER BY categorie");
						echo "<option value='Aucune'>Aucune</option>";
						while($row = mysql_fetch_assoc($res)){//On met "Aucune" en premiere position donc on ne le reliste pas lors du parcours du résultat de la requête SQL
							if ($row["categorie"]!= 'Aucune'){
								echo "<option value='".$row["categorie"]."'>".$row["categorie"]."</option>";
							}
						}
					 mysql_close(); // Déconnexion de MySQL?>
				</select></p>
 
 
					<p><label>Rubrique : </label>
					<div id="div-rubrique" style="position:absolute; top:50px; left:80px;">		
					<select name='rubrique' id="rubrique" style='color:#979797;' onchange='go2();'>
						<option value='-1'>Choisir une catégorie</option>
						</select></p>
					</div>	
 
 
					<p><label for="srubrique">Sous Rubrique </label> : 
					<div id="div-srubrique" style="position:absolute; top:88px; left:105px;">
					<select name="srubrique" id="srubrique" style="color:#979797;">
						<option value='-1'>Choisir une rubrique</option>
					</select>
					</div>
					</p>	
 
 
 
				</div>
			</div>
 
 
			</form>
 
		</div>
 
		<!--pied de page-->		
 
   </body>
</html>
<?
}
?>

Le fichier ajaxRubrique.php qui est appelé par go():

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
 <?echo "<select name='rubrique' id='rubrique' style='color:#979797;'>";
	if(isset($_POST["nomCategorie"])){
		mysql_connect("62.193.238.9", "franceasso", "interactive"); // Connexion 
		mysql_select_db("france-asso"); // Sélection de la base france-asso
		$resR = mysql_query("SELECT DISTINCT rubrique FROM associations WHERE categorie like '%".substr($_POST['nomCategorie'], -3)."' ORDER BY rubrique");
		$resAucune = mysql_query("SELECT COUNT(*) FROM associations WHERE categorie like '%".substr($_POST['nomCategorie'], -3)."' AND rubrique='Aucune'");
		$rowAucune =  mysql_fetch_assoc($resAucune); 
		if ($rowAucune["COUNT(*)"] != 0){
			echo "<option value='Aucune'>Aucune</option>";
			while($rowR = mysql_fetch_assoc($resR)){
				if ($rowR["rubrique"]!= 'Aucune'){
					echo "<option value='".utf8_encode($rowR["rubrique"])."'>".utf8_encode(ucfirst(formatUrl($rowR["rubrique"])))."</option>";
				}
			}
		}
		else{
			while($rowR = mysql_fetch_assoc($resR)){				
				echo "<option value='".utf8_encode($rowR["rubrique"])."'>".utf8_encode(ucfirst(formatUrl($rowR["rubrique"])))."</option>";
			}
		}
	}
	echo "</select>";?>

Et enfin le fichier appelé par go2() ajaxSRubrique.php:

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
<? 	echo "<select name='srubrique' id='srubrique' style='color:#979797;'>";
	if(isset($_POST["nomRubrique"])){
 
		mysql_connect("62.193.238.9", "franceasso", "interactive"); // Connexion 
		mysql_select_db("france-asso"); // Sélection de la base france-asso
		$resR = mysql_query("SELECT DISTINCT sous_rubrique FROM associations WHERE rubrique like '%".($_POST['nomRubrique'])."' ORDER BY sous_rubrique");
		$resAucune = mysql_query("SELECT COUNT(*) FROM associations WHERE rubrique like '%".($_POST['nomRubrique'])."' AND sous_rubrique='Aucune'");
		$rowAucune =  mysql_fetch_assoc($resAucune); 
		if ($rowAucune["COUNT(*)"] != 0){
			echo "<option value='Aucune'>Aucune</option>";
			while($rowR = mysql_fetch_assoc($resR)){
				if ($rowR["sous_rubrique"]!= 'Aucune'){
					echo "<option value='".($rowR["sous_rubrique"])."'>".ucfirst(formatUrl($rowR["sous_rubrique"]))."</option>";
				}
			}
		}
		else{
			while($rowR = mysql_fetch_assoc($resR)){				
				echo "<option value='".($rowR["sous_rubrique"])."'>".ucfirst(formatUrl($rowR["sous_rubrique"]))."</option>";
			}
		}
	}
	echo "</select>";
	?>

Merci d'avance pour ton aide ^^

**Zeo34** · 31/07/2008, 10h41

Regarde ce post > http://www.developpez.net/forums/sho...26#post3511226

[AJAX] 3 listes attachées ! ID non accessible !

JavaScript

Discussions similaires

Partager

Partager