[AJAX] 3 listes Déroulantes liées !

**didabigboss** · 03/04/2012, 08h48

Bonjour tout le monde , j'essaye une dernière fois avant de sauter par la fenêtre tellement je déprime . je débute en JavaScript

et j'ai un projet à faire qui consiste à créer un site de vente de vêtement en ligne .
J'ai utilisé PHP5 , HTML5 , CSS3 tout est nikel jusqu'aux moment ou le prof m'as proposé d'utiliser les listes déroulantes pour le choix de mes vêtements . j'explique un peu plus

Sur mes pages j'ai des modèles de Jeans , Pantalons , Tishirt et chemises ... pour les jeans par exemple le client clique sur une liste déroulante pour choisir la couleur de jeans et en fonction de son choix j'affiche une deuxième liste déroulante avec les tailles disponibles , et en fonction de la taille choisie j'affiche les articles disponibles .

pour les 2 premières listes déroulantes ( couleurs et tailles ca marche très bien ) , mais pour la recherche des articles disponibles j'ai besoin de la 1ère variable choisie ( couleurs ) et la 2ème (tailles ) pour faire ma requête , j'arrive à récupérer soit la 1ère , soit la 2ème mais pas les 2 !!
Mon code de la fct Javascript.js

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
 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;
            }
function mettreAJourTaille(func)
            {
                // Si la zone de sélection des annees d'étude est affichée
                if (document.getElementById('tailles').style.display != 'none') {
                    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('tailles').innerHTML = leselect;
                            if (func != undefined) {
                                func();
                            }
                        }
                    }
                    // Ici on va voir comment faire du post
                    xhr.open("POST","ListeTaille.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, le nom  de l'année d'étude
                    sel2 = document.getElementById('couleurs');//on récupère les éléments de la liste par leur id
                    couleur_code = sel2.options[sel2.selectedIndex].value;// on stocke la valeur de l'option choisie dans la liste
                    xhr.send("id_couleurs="+couleur_code);//on envoie la valeur sur le server
return couleur_code ;
                }
            }
function articles_dispo(func)
            {
                if (document.getElementById('produit').style.display != 'none') {
                    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('produit').innerHTML = leselect;
                            if (func != undefined) {
                                func();
                            }
                        }
                    }
                    // Ici on va voir comment faire du post
                    xhr.open("POST","articles.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, le nom  de l'année d'étude
                    sel2 = document.getElementById('tailles');//on récupère les éléments de la liste année étude par leur id
                    tailles_code = sel2.options[sel2.selectedIndex].value;// on stocke la valeur de l'option choisie dans la liste
                    xhr.send("id_tailles="+tailles_code);//on envoie la valeur sur le server
                }
            }

J'ai 2 fonctions une qui s'appelle mettreAjourTaille() qui est chargé à récupérer la taille en fct de la couleurs choisie et une 2ème fonction articles_dispo() qui est chargé d'afficher les articles dispo uniquement en fct de la couleur et de la taille ( pour l'instant ca l'affiche uniquement en fct de la taille

) .
mon but c'est de modifier la fonction articles_dispo() pour qu'elle me retourne les articles disponibles en fonction de la couleurs et de la taille , je ne sais pas si je dois fusionner mes 2 fonctions en une seule ...

Exemple de ce que ca donne mon code :

ID_Jeans Couleur Taille
J1 Bleu M
J2 Noir XXL
J3 Noir M
pour le fct mettreAJourTaille , si le client clique sur couleur Noir ca affiche les tailles M et XXL ( ca c'est bon ^^ )
pour la fct articles_dispo , si le client choisi la taille M : ca affiche J1 et J3 alors que J1 est bleu !!!
Mon problèmes c'est que je n'arrive pas à récupérer la couleurs pour l'introduire dans ma requête pour la recherche des articles disponibles ..
quelqu'un pourra me sauver la vie ...
je vous remercie et j'espère que j'étais clair .

**Pymento** · 03/04/2012, 17h32

Dsl j'ai lu en diagonale ton post, mais ce que tu veux faire à l'air plutot simple:

tu dois faire avant l'appel de ton ajax:

Code :

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

1
2
3
 
select1 = document.getElementById("#id_du_select1").value
select2 = document.getElementById("#id_du_select2").value

et passer d'abord dans ta fonction ajax puis dans ta requête ajax les deux params.
Par contre moi j'aurais tendance à faire du GET pour l'ajax, pour tout te dire je n'ai jamais fais de POST, je ne sais pas si ça peut changer quelque chose.

Ensuite coté php, tu n'as ps mis ton code.

**andry.aime** · 04/04/2012, 08h05

Envoyé par Pymento

tu dois faire avant l'appel de ton ajax:

Code :

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

1
2
3
 
select1 = document.getElementById("#id_du_select1").value
select2 = document.getElementById("#id_du_select2").value

et passer d'abord dans ta fonction ajax puis dans ta requête ajax les deux params.

Pourquoi

Envoyé par Pymento

Par contre moi j'aurais tendance à faire du GET pour l'ajax, pour tout te dire je n'ai jamais fais de POST, je ne sais pas si ça peut changer quelque chose.

GET a une fâcheuse tendance à n'utiliser que le cache dans certains navigateurs si tu ne faits pas attention

.

@didabigboss:
Peut-on voir ton code html et les codes des pages php appelées? Que fait la fonction 'func()'?

A+.

**didabigboss** · 04/04/2012, 08h33

Elle ne fait absolument rien de tout , d'ailleurs je n'ai même pas une fonction func
J'ai jamais fait du ajax de ma vie donc j'ai trouvé ce code sur le net et j'ai essayer de l'adapter pour qu'il soit bon pour les 3 listes

**andry.aime** · 04/04/2012, 08h57

Envoyé par didabigboss

Elle ne fait absolument rien de tout , d'ailleurs je n'ai même pas une fonction func
J'ai jamais fait du ajax de ma vie donc j'ai trouvé ce code sur le net et j'ai essayer de l'adapter pour qu'il soit bon pour les 3 listes

Je te conseille de lire un tutoriel sur ajax pour le comprendre au lieu de faire des copier/coller sur le net.
Et pour pouvoir t'aider :

Envoyé par andry.aime

@didabigboss:
Peut-on voir ton code html et les codes des pages php appelées?

A+.

**didabigboss** · 04/04/2012, 15h25

ca c'est le code de ma fonction ListeTaille.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 "./conf.php";
// on se connecte à MySQL 
$db = mysql_connect($serveur, $login,$password); 
// on sélectionne la base 
mysql_select_db($base,$db); 
 
// on crée la requête SQL 
 
$couleur_code=$_REQUEST['id'];
// on envoie la requête 
$req = mysql_query("select taille from article where type ='Jeans1' and couleurs='$couleur_code'") or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error()); 
 
// on fait une boucle qui va faire un tour pour chaque enregistrement 
while($data = mysql_fetch_assoc($req)) 
    { 
    // on affiche les informations de l'enregistrement en cours 
 
					 echo"<OPTION>".$data['taille']."</OPTION>";
    } 
echo"</SELECT>"; 
echo"</td>"; 
 
// on ferme la connexion à mysql 
mysql_close(); 
 
?>

enfaite j'ai modifié mon code pour avoir besoin que de 2 listes liées donc j'ai pas de problème pour ça .
par contre j'ai une question , dans ma fonction javascript je fait

Code :

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

xhr.open("POST","ListeTaille.php",true);

avec comme paramètre le ListeTaille.php
. ce que je veut c'est faire l'appel à une fonction qui se trouve dans ListeTaille.php ce qui m’évite de créer plusieurs fichiers . je sais que parfois c'est pas clair ce que je dis du coup je vais vous donner le code que j'essaye de faire mais qui ne marche pas car je n'arrive pas à faire l'appel de la fonction .

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 "./conf.php";
// on se connecte à MySQL 
function modif($champs){
$db = mysql_connect($serveur, $login,$password); 
// on sélectionne la base 
mysql_select_db($base,$db); 
 
// on crée la requête SQL 
 
$couleur_code=$_REQUEST['id'];
// on envoie la requête 
$req = mysql_query("select taille from article where type ='$champs' and couleurs='$couleur_code'") or die('Erreur SQL !<br>'.$sql.'<br>'.mysql_error()); 
 
// on fait une boucle qui va faire un tour pour chaque enregistrement 
while($data = mysql_fetch_assoc($req)) 
    { 
    // on affiche les informations de l'enregistrement en cours 
 
					 echo"<OPTION>".$data['taille']."</OPTION>";
    } 
echo"</SELECT>"; 
echo"</td>"; 
 
// on ferme la connexion à mysql 
mysql_close(); 
}

ce qui me permet d'utiliser le même fichier plusieurs fois avec des types de Jeans différents au lieu de créer un autre fichier avec juste le $champs qui change .

je vous remercie d'avance

**andry.aime** · 04/04/2012, 16h46

Bonjour,

Après une lecture diagonale, déjà plusieurs erreurs:
1- Tu as des balises fermantes pour les select mais pas de balise ouvrante.
2- Tes options n'ont pas de value.
3- Tu envoies la variable 'id_couleur' or que tu récupères 'id'.
4- N'utilise pas $_REQUEST mais utilise $_POST pour récupérer les variables.

Je te conseille lire de tutoril AJAX et php avant de continuer.

A+.

[AJAX] 3 listes Déroulantes liées !

AJAX

Discussions similaires

Partager

Partager