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

**mims1664** · 26/02/2008, 16h27

Bonjour,

je me lance doucement dans l'ajax, et je commence a prendre consciences de sa puissance, par contre je bloque sur une 3 listes chainées entre elles ...

lorsque ma seconde est remplie l'id du select semble inaccessible, et donc j'ai un probleme d'acces a l'objet de la seconde liste générée par ajax,

Code :

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

1
2
3
 
sel = document.getElementById('modele');
idmodele = sel.options[sel.selectedIndex].value;

la j'ai un message d'erreur sel.options a la valeur nul ou n'est pas un objet,

lorsque j'affiche le code source je n'appercois pas la liste générée en ajax ! donc je n'arrive pas a débugger...

edit :
voyez vous meme ...
http://www.jantes-alu.com/tst/index.php

voici mon code :

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
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
 
 
<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('modele').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 gotst(){
				alert("tst");
				sel = document.getElementById('modele');
				idmodele = sel.options[sel.selectedIndex].value;
				}
 
			function go_type(){
				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('type').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('modele');
				idmodele = sel.options[sel.selectedIndex].value;
 
 
 
				xhr.send("idModele="+idmodele);
 
 
			}			
		</script>

Mes listes

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
 
 
		<?
			//$req="select * from voiture_marque where visible = 1 order by id ASC";
			//$req="SELECT DISTINCT MARQUE, ID FROM `database` GROUP BY MARQUE ";
 
			$req="SELECT DISTINCT MARQUE  FROM `database` WHERE 1";
			$bdd->setQuery($req);
			$rescar = $bdd->executeQuery();
		?>
        <select name="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="modele" id="modele" title="Modeles automobiles"  class="rechercheliste">
	        <option value='-1'>Modèle</option>
	      </select>
	      </div>
 
	    <div id='type' style='display:inline'>
	      <select name="type" id="type" title="Type automobiles"  class="rechercheliste" >
	        <option value='-1'>Type</option> 
	        </select>
	      </div>

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
17
18
19
20
21
22
23
24
25
26
27
 
<?php
 
include ("../tpl/ho.php");
//connexion
 
        echo "<select name='modele' id='modele' class='rechercheliste' OnChange='gotst()'>";
 
if(isset($_POST["idMarque"])){
        
        $idmarque=$_POST["idMarque"];   
//      $idmarque=6;
        //$req="select * from voiture_modele where IDMARQUE = ".$idmarque." and visible = 1 order by id ASC";
        $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>";
        }
        echo "</select>";
 
?>

agax_listerecherchetype.php
(la requette n'est pas a jour mais de tte facon l'ajax n'ajax pas !)

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
 
<?php
 
include ("../tpl/ho.php");
 
        
        
if(isset($_POST["idModele"])){
        
        $idmodele=$_POST["idModele"];   
//      $idmarque=6;
        //$req="select * from voiture_modele where IDMARQUE = ".$idmarque." and visible = 1 order by id ASC";
        
        $req="SELECT DISTINCT MODELE FROM `database` ";
        $bdd->setQuery($req);
        $res = $bdd->executeQuery();
 
 
        echo "<select name='type' id='type' class='rechercheliste'>";
        
        for($i=0;$i<sizeof($res);$i++){
                        echo "<option value='".$res[$i][0]."'>".stripslashes($res[$i][0])."</option>";
                }
        
        echo "</select>";
        
        }
?>

J'ai une erreur sel.option a la valeur null ou n'est pas un objet
et lorsque j'affiche la source forcément ma liste n'apparait pas .... donc je ne peux pas débugger ...

**E.Bzz** · 27/02/2008, 10h02

Bonjour,
la toute première correction consiste à virer les ID dupliqués :

Code :

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

1
2
 <div id='modele' style='display:inline'>
<select name="modele" id="modele" title="Modeles automobiles"  class="rechercheliste">

Il y en a peut-être ailleurs : pas regardé.

Ensuite (et ensuite seulement), tout cela fait-il partie d'un <form> ?
La modif des objets via innerHTML n'est envisageable qu'en dehors d'un formulaire. Dans le cas contraire, tu seras obligé de passer par les syntaxes DOM de création d'objets (préférable de toutes façons, d'ailleurs).

A+

**mims1664** · 27/02/2008, 19h00

syntaxe DOM de création ?

aurais tu un liens sur un bon tuto de débutant pour que je lise et comprenne un peu tout cela ?

Merci pour ta premiere réponse.

**E.Bzz** · 28/02/2008, 09h01

Envoyé par mims1664

syntaxe DOM de création ?

aurais tu un liens sur un bon tuto de débutant pour que je lise et comprenne un peu tout cela ?

Comme la plupart du temps : la FAQ

A+

**mims1664** · 28/02/2008, 11h32

Oui j'ai deja lu la FAQ, j'ai bien compris que le DOM était un un standard formattage de donnée.

La question que je me pose est dans mon cas, mes données sont dans ma base de donnée donc non sous forme DOM, pourqoi devrais je convertir ces donnée sous le format DOM, pour ensuite l'attaquer au meme titre qu'actuellement ?

Il y a vraiment un truc que je comprends pas c'est l'intéret dans mon cas (AJAX 3 listes chainées et pas mal de donnée) tout cela pour afficher des donnée que de ttoute facon j'exploite a partir de ma base de donnée ?

**E.Bzz** · 28/02/2008, 11h52

Pas de lien entre DOM et BDD.

Ajax te permet de récupérer les données dans la BDD.
Le DOM te servira à les intégrer correctement dans ta page.

A+

**mims1664** · 28/02/2008, 16h35

Ok, donc apres longue recherche, multiples essais de script je n'arrive pas a faire fonctionne 3 lites attachées ...

je suis complètement paumé, quelqu'un a déja réussi a faire cela ?

**E.Bzz** · 28/02/2008, 16h45

Envoyé par mims1664

Ok, donc apres longue recherche, multiples essais de script je n'arrive pas a faire fonctionne 3 lites attachées ...

je suis complètement paumé, quelqu'un a déja réussi a faire cela ?

Il te faut gérer ça comme 2 groupes de 2 listes liées

Liste1 liée à Liste2
et indépendamment
Liste2 liée à Liste3

Ca simplifiera ...

A+

**mims1664** · 28/02/2008, 22h02

Est ce normale que lorsque ma seconde liste se remplie par rapport a la premiere, lorsqeu j'affiche la source je n'appercois pas le code HTML de la seconde liste ?

**mims1664** · 28/02/2008, 22h50

peux tu regader ici
http://www.jantes-alu.com/tst/

est me dire ce qui ne va pas ?

j'ai toujours cette erreur javascript, ce n'est plus la même, maintenant j'ai "objet requit " toujours ce probleme d'acces a l'ID de la seconde liste ...

pour quel raison je dis cela ? parce qu'en commentant

ces lignes :

Code :

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

1
2
3
 
sel = document.getElementById('mod');
idmodele = sel.options[sel.selectedIndex].value;

et en mettant

Code :

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

1
2
 
xhr.send("idModele=A2");

ca fonctionne !

**E.Bzz** · 29/02/2008, 09h21

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) ...

De plus tu dois avoir un problème dans les ID ramenés par Ajax : si on choisit successivement 2 marques différentes => problème dans la 2° liste (à commencer par là : ce problème génère peut-être les autres

)

A+

**mims1664** · 29/02/2008, 12h15

En faite le Onchange je le mets dans le innerHTML et ca fonctionne car lorsque je clique sur la seconde liste remplie dynamiquement ca génère le bug lol.

Pour le DOM d'après ce que j'ai compris il n'y a pas vraiment d'intéret dans mon cas, après dans l'affichage des donnée oui se serait bien !

Une petite question, est ce que ca se fait de mettre a disposition ces fichiers ainsi qu'un échantillon de donnée sur le forum en cas ou quelqu'un voudrait m'aider ? car je recherche mais vraiment je suis paumé !

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

Envoyé par mims1664

En faite le Onchange je le mets dans le innerHTML et ca fonctionne car lorsque je clique sur la seconde liste remplie dynamiquement ca génère le bug lol.

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.

Pour ça, tu seras obligé d'ajouter le onchange dans le select de ta page, puisqu'il ne sera plus retourné dans le responseText ...

A+

**mims1664** · 29/02/2008, 12h33

Il faut donc aussi que je retire le

Code :

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

1
2
 
echo "<select name='modele' id='modele' class='rechercheliste' OnChange='gotype()'>";

et

Code :

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

1
2
 
echo "</select>";

dans

agax_listerecherchemodele.php

je commence peut etre a comprendre ... LOL

EDIT : apres test non il ne faut pas les supprimer car ca ne fonctionne pas sinon... donc je n'ai pas encore commencé a comprendre.

**E.Bzz** · 29/02/2008, 12h36

That's it !!

A+

**E.Bzz** · 29/02/2008, 12h37

Envoyé par mims1664

EDIT : apres test non il ne faut pas les supprimer car ca ne fonctionne pas sinon... donc je n'ai pas encore commencé a comprendre.

Relis mes remarques précédentes sur cette modif ...

A+

**mims1664** · 29/02/2008, 12h39

Envoyé par E.Bzz

Pour ça, tu seras obligé d'ajouter le onchange dans le select de ta page, puisqu'il ne sera plus retourné dans le responseText ...

A+

Il est encore retourné dans la responseText car si je le supprime du select de agax_listerecherchemodele.php cela ne foncitonne plus

**E.Bzz** · 29/02/2008, 12h42

Envoyé par mims1664

si je le supprime du select de agax_listerecherchemodele.php cela ne foncitonne plus

C'est ce que tu dois corriger

A+

**mims1664** · 29/02/2008, 12h45

Ok ok je me suis trompé de fonction js
j'ai donc applqué cela

Code :

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

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

a la premier fonction, logique en plus ....

ensuite donc j'ai un probleme de remplissage car la liste est vide, je remplie la liste avec une boucle qui affiche ceci :

Code :

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