[AJAX] 3 listes Déroulantes liées !
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:
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 .
