AJAX - 3 Listes dépendantes BUG ! Helllp :'(

AJAX - 3 Listes dépendantes BUG ! Helllp :'( - HTML/CSS - Programmation

Marsh Posté le 04-06-2006 à 21:44:03    

Bonjour à tous !   :)  
 
Alors voila, je suis en train de developper un logiciel en PHP et j'ai besoin dans celui-ci de mettre 3 listes déroulantes dépendantes.  
 
Explication:  
 
- J'ai une base de donnée: Workwear  
- J'ai 3 tables :  
 
sexe(id_sexe, nom_sexe)  
categorie(id_categorie, id_sexe, nom_categorie)  
article(id_article, id_categorie, nom_article, etc....)  
 
Je veux donc créer 3 listes déroulantes afin que lorsque que je choisi le sexe (homme/femme/mixte) il m'affiche des catégorie correspondante(Veste, Chemise,Chemisier) puis les article de la catégorie (Chemise rouge, CHemise Verte, Chemisier Bleu).  
 
J'ai donc regarder un peu sur le net et j'ai trouvé un script en AJAX permattant de faire çà.  
Aussi les exemples sont souvent basés sur 2 listes et non pas 3 :s  
 
J'ai donc modifier le script, adapté +/- et voila donc mes 3 listes.  
Sauf qu'elles buguent ! mdr  
 
Explication:  
 
Je load la page pour la premiere fois,  
la premiere liste est d'office sur HOMME (sexe)  
- je change la 2 il m'affiche bien dans la 3  
 
jusque la tout va bien...  
 
- Je change la 1 (je met FEMME)  
- il me change bien la 2 (Chemisier)  
- Mais me change pas la 3  
 
- je reviens sur la 1 (homme)  
- il me change la 2 (Chemise)  
- Me change PLUS la 3 !!  :pt1cable:  
 
J'ai donc passé 2 jours pour essayer de comprendre mais je ne trouve pas et je ne la trouverais jamais !   :fou:  
 
C'est pourquoi je fais appel à vous pour m'aider car je perd la tete !  
Je ne colle pas mes fichiers ici car çà ferais trop de blabla  
Je vais juste vous permettre des les telecharger ici fichier rar:  
 
http://firstprojectdeuz.free.fr/modif_article/  
 
Et de tester en ligne mon travail ici pour mieux comprendre:  
 
http://first-project.freezee.org/m [...] rticle.php  
 
Je vous remercie par avance !  
 
Seb.

Reply

Marsh Posté le 04-06-2006 à 21:44:03   

Reply

Marsh Posté le 04-06-2006 à 21:57:43    

Tu n'a pas de sendData3!
C'est quoi le onKeyUp? ça va bugger. tu ne doit utiliser que le onChange.

Reply

Marsh Posté le 04-06-2006 à 22:00:10    

Le onKeyUp il sert lorsque l'on bouge sur le clavier (en gros sert a rien) :)
 
SendData3 ?? c'est nécessaire ?
 
En fait j'ai choper un tuto sur le net mais que sur 2 listes et je galere à l'adapter sur 3 listes :(

Reply

Marsh Posté le 04-06-2006 à 22:07:48    

heu non c'est vrai que sendData3 ne servirai à rien.
À mon avis le bug vient de onKeyUp. Essaye de mettre le code de onKeyUp dans onChange.
Puis, j'aurai organisé un peu différemment: essaye plutôt de faire qu'une fonction sendData(), avec deux arguments: sexe et catégorie, la catégorie pouvant être vide, et derrière un seul script PHP avec aussi les deux arguments en question.

Reply

Marsh Posté le 05-06-2006 à 10:43:25    

Si quelqu'un a une soluce ou pense l'avoir, je l'invite à modifier directement mon fichier !
 
Car je n'y arrive vraiment pas, et il faut que je trouve la soluce pour demain ! :'(

Reply

Marsh Posté le 05-06-2006 à 11:36:58    

dans ton sendData2 tu peux faire un alert de la réponse:

Code :
  1. //Ok pour la page cible
  2.  XhrObj.onreadystatechange = function()
  3.  {
  4.   if (XhrObj.readyState == 4 && XhrObj.status == 200){
  5.             content.innerHTML = XhrObj.responseText ;
  6.     alert(XhrObj.responseText);
  7.   }
  8.  }


Histoire de voir ce que ça te retourne ( un peu dur de tester chez soi, même si tu donnes tout).
 
Par ailleurs comme te l'expliquais nargy, tout cela n'est pas très bien "penser", tu devrais avoir une seule fonction de connection.
Et puis un conseil, dans la mesure ou je n'imagine pas ton catalogue changé toutes les secondes, tu ferais mieux de récupérer tes trois tables d'un coup dans différents tableaux js et de ne plus traiter qu'avec ceux-ci.
Tu pourrais même ainsi eviter toute xmlHttpRequest qui sert pas à grand chose, je ferais un truc dans le genre:

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
  4. <head>
  5.   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
  6.   <title>Exemple</title>
  7.   <script type="text/javascript">
  8.   var sexe = new Array();
  9.   //je mets des ids au pifs
  10.   sexe['2'] = {'text':'Masculin'};
  11.   sexe['6'] = {'text':'Feminin'};
  12.   sexe['8'] = {'text':'Mixte'};
  13.   var cat   = new Array();
  14.   cat['3']  = {'fk':'2', 'text':'Veste'};
  15.   cat['7']  = {'fk':'8', 'text':'Tee-Shirt'};
  16.   cat['9']  = {'fk':'6', 'text':'Jupe'};
  17.   cat['12'] = {'fk':'2', 'text':'Calecon'};
  18.   var art   = new Array();
  19.   art['1']  = {'fk':'3', 'text':'A'};
  20.   art['2']  = {'fk':'3', 'text':'B'};
  21.   art['3']  = {'fk':'3', 'text':'C'};
  22.   art['4']  = {'fk':'3', 'text':'D'};
  23.   art['5']  = {'fk':'3', 'text':'E'};
  24.   art['6']  = {'fk':'7', 'text':'M'};
  25.   art['7']  = {'fk':'7', 'text':'N'};
  26.   art['8']  = {'fk':'7', 'text':'O'};
  27.   art['9']  = {'fk':'9', 'text':'R'};
  28.   art['10'] = {'fk':'9', 'text':'S'};
  29.   art['11'] = {'fk':'9', 'text':'T'};
  32.   function init(target, obj){
  33.     var targetNode = document.getElementById(target);
  34.     if ( targetNode != undefined){
  35.        var table;
  36.        eval('table = '+target);
  37.        targetNode.innerHTML = '';
  38.        var optNode = document.createElement('option');
  39.        optNode.value = -1;
  40.        optNode.appendChild(document.createTextNode(''));
  41.        targetNode.appendChild(optNode);
  42.        for(var i in table){
  43.          if( (obj != undefined && table[i]['fk'] == obj.value) || obj == undefined) {
  44.            optNode = document.createElement('option');
  45.            optNode.value = i;
  46.            optNode.appendChild(document.createTextNode(table[i]['text']));
  47.            targetNode.appendChild(optNode);
  48.          }
  49.        }
  50.     }
  51.   }
  52.  
  53.   </script>
  54. </head>
  55. <body onload="init('sexe')">
  56. <select id="sexe" onchange="init('cat', this)"></select>
  57. <select id="cat" onchange="init('art', this)"></select>
  59. <select id="art"></select>
  60. </body>
  61. </html>


ça doit pas tout a fait faire ce que tu veux, mais l'idée est la et tu as juste en php a générer les tables en haut.
 
Maintenant si tu tiens absolument à faire de l'ajax, tu n'as pas grand chose à modifier, tu remplaces:

Code :
  1. var table;
  2.        eval('table = '+target);


par var table = le resultat de ton xmlHttpRequest, et tu dois même pouvoir faire péter ce test:

Code :
  1. if( (obj != undefined && table[i]['fk'] == obj.value) || obj == undefined) {


vu que ton XHR n'est censé remonter que les données correspondates.

Reply

Marsh Posté le 05-06-2006 à 13:38:40    

OK merci de ta réponse, je vais tester çà...
 
pour l'idée du catalogue qui ne change pas toute les secondes, en fait, je dois créér le logiciel au maximum automatique.
Lorque je rentre pour la premiere fois sur le logiciel,aucune catégorie, aucun article et surtout aucun menu !
Lorque j'ajoute une catégorie un menu se crée dans homme (expl: VESTE), la page d'affichage de la catégorie se crée (Veste_Homme.php).
Le tout en automatique...
Car l'utilisateur du logiciel ne doit en AUCUN cas, ouvrir son bloc note et codé du PHP ou quoi que ce soit...
 
Y a t'il un moyen de remplir les tableaux automatiquement ? Car sinon c cuit ! :(

Reply

Marsh Posté le 05-06-2006 à 13:47:33    

Bin tu fais générer le code js par un script php, rien de bien compliqué [:spamafote]

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed