[AJAX] actualiser une liste déroulante via une BDD

Version imprimable

21/03/2011, 15h04
Jimmy72_

[AJAX] actualiser une liste déroulante via une BDD

Bonjour,

Je suis actuellement en projet professionnel et j'ai une partie en AJAX a faire. Le probleme, c'est que je ne comprends pas trop comment faire.

Voilà le topo

je dois faire un site de type E-commerce et pour ca, une page web est dédié a a la mise en place d'un pc sur mesure.

Donc voila, j'ai une table produit, qui contient mes produit, une table type_produit, qui lui contient par exemple carte mère, processeur, carte graphique, etc...

Et donc pour mon champ processeur, j'ai une liste déroulante qui doit m'afficher juste les marques dont les produits ont un id_type_produit = '1' (processeur)

ET je ne vois pas comment faire en AJAX.

Merci pour votre aide =°
21/03/2011, 15h44
nadox

Bonjour,

Tu appelle en Ajax une page qui affiche juste tes données.
Sais-tu ce qu'est Ajax ?
Sinon tu as des tutoriels...
http://ajax.developpez.com/cours/
21/03/2011, 16h42
Jimmy72_

Bonjour à toi,

Oui je sais globalement ce qu'est AJAX et a quoi il sert.

J'ai déjà regardé les tutoriels mais malgré ca, je n'arrive pas a mettre en place mon code.

Donc si j'apelle une page avec mes données, cela veut dire qu'il me faut une page pour chaque select?
21/03/2011, 16h52
Bovino

http://siddh.developpez.com/articles/ajax/#LIV-A
21/03/2011, 20h40
Jimmy72_

Oui, c'est a peu prèt ca, mais le problème,c'est que pour moi les listes déroulantes sont facultatives, on n'est pas obligé de faire un choix et ca je ne vois pas trop comment le faire ^^
21/03/2011, 21h05
nadox

Facultatives pour faire quoi ? :roll:

Tu veux sans doute parler d'une auto-complétion ?

http://dcabasson.developpez.com/arti...ion-pas-a-pas/
22/03/2011, 08h47
Jimmy72_

Non, enfaite, j'ai trois listes déroulantes:
-> une avec une caractéristique(nombre de coeur)
-> une avec les marques
-> une avec mon produit ( ici, le processeur)

On peut faire un choix avec les deux premieres listes déroulantes mais elle ne sont pas obligatoires pour avoir un produit.

Car on peut avoir directement la liste de tous les processeurs disponibles.

Voilà, je vous remercie.
22/03/2011, 15h07
nadox

Donc il s'agît bien du premier exemple dont il faut que tu t'inspire.

La seule subtilité dans ton cas est d'avoir deux listes qui permettent de mettre à jour la troisième.
Coté serveur, tu prévoit un script(PHP ou autre, je ne sais pas ce que tu utilise) qui renvoit la liste. Ce script peut prendre en paramètre les données de tes deux premières listes afin de sortir les produit filtrés de la bdd. Les paramètres ne sont pas obligatoires, ce qui est important pour sortir la liste sans filtre.
Coté client(javascript), tu appelle l'url en passant les paramètres correspondant.(il faut passer en paramètre GET ou POST les valeurs actuelles des deux premières listes)
Le onreadystatechange mettra à jour avec la nouvelle liste.
Pour initialiser la liste au chargement de la page, tu peux l'avoir déjà rempli coté serveur. Tu peux aussi appeler la fonction qui effectue un requête Ajax sans paramètre.
Le premier option des select doit être vide (pas de value) afin de pouvoir réinitialiser le filtre.

Oui, ca y ressemble bien. Je vais essayer d'adapter l'exemple avec trois listes déroulantes. Je vous préviendrais si j'ai des problèmes pour le code.

Merci a vous =D

Voila je reviens vers vous après plusieurs essais et j'ai un probleme du coté de mon script PHP :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 if(isset($_POST["id_marque"]) && isset($_POST["id_caracteristique"])){ $sql = "SELECT produit_compatibilite.id_produit,produit.id_produit,produit.description FROM produit,produit_compatibilite WHERE produit_compatibilite.id_produit = produit.id_produit OR id_marque=".$_POST["id_marque"]." OR id_caracteristique=".$_POST["id_caracteristique"]." ORDER BY prix_ht"; $res=mysql_query($sql); while($row = mysql_fetch_assoc($res)){ echo "<option value='".$row["id_produit"]."'>".$row["description"]."</option>"; } }
Voila, si quelqu'un a une id pour que je puisse avoir une sélection de mon produit d'après les deux post passé

Merci =D

24/03/2011, 11h17
Jimmy72_

Aussi, je ne vois pas comment faire ceci:

Citation:

Les paramètres ne sont pas obligatoires, ce qui est important pour sortir la liste sans filtre.
24/03/2011, 12h15
nadox

C'est manifestement un problème de PHP/SQL que tu as donc...

Il faut effectuer la requête SQL et générer les balises options même si tu n'as pas les paramètres(ton premier if dans le PHP). Par contre tu auras une clause WHERE différente(pas de filtre).
24/03/2011, 16h12
Jimmy72_

D'accord et comment je fait ca car là, je ne vois pas vraiment comment faire ca^^
Aurait tu un exemple s'il te plait ?

J'aimerais savoir comment faire aussi pour que le premier option de mes select ne prennent aucune valeur.

Je vous remercie pour votre aide a l'avance :D

Voila, je ne sait pas comment faire pour récupérer qu'un seul élément avec mon script.js:

Code:

1
2
3
4
5
6
7
var sel = document.getElementById('caract');
var sel2 = document.getElementById('marque');
var id_caracteristique = sel.options[sel.selectedIndex].value;
var id_marque = sel2.options[sel2.selectedIndex].value;
var requete = "file="+url+"&id_caracteristique="+id_caracteristique+"&id_marque="+id_marque;
 
xhr.send(requete);

et mon ajax.php:

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
echo "<select name='livre'>";
 
	if(isset($_POST["id_caracteristique"])){
		//caracteristique choisi
 
		if(isset($_POST["id_marque"])){
 
			//marque choisi
			$query ="SELECT id_produit,description FROM produit WHERE id_caracteristique=".$_POST["id_caracteristique"]." AND id_marque=".$_POST["id_marque"]." ORDER BY prix_ht";
			$res=mysql_query($query);
		}
		else{
 
			$query = "SELECT id_produit,description FROM produit WHERE id_caracteristique=".$_POST["id_caracteristique"]." ORDER BY prix_ht";
			$res=mysql_query($query);
 
		}
	}
	else{
		if(isset($_POST["id_marque"])){
 
			$query = "SELECT id_produit,description FROM produit WHERE id_marque=".$_POST["id_marque"]." ORDER BY prix_ht";
			$res=mysql_query($query);
		}
	}	
while($row = mysql_fetch_row($res)){
	echo "<option value='".$row["id_produit"]."'>".$row["description"]."</option>";
}
	echo "</select>";

Si vous pouvez m'aidez, sa serait sympa je vous remercie.

Quelque chose comme ça devrait faire l'affaire (pas testé, je ne garantie pas un code sans erreur) :

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
 
echo "<select name='livre'>";
	$query = "SELECT id_produit,description FROM produit ";
 
	// récupération des paramètres
	$hasCarac = isset($_POST["id_caracteristique"]) && !empty($_POST["id_caracteristique"]);
	$hasBrand = isset($_POST["id_marque"]) && !empty($_POST["id_marque"]);
	$id_caracteristique = $hasCarac ? $_POST["id_caracteristique"] : "";
	$id_marque = $hasBrand ? $_POST["id_marque"] : "";
 
	// on précise la requete selon les parametres (si il y en a)
	if($hasCarac && $hasBrand) {
		$query .= " WHERE id_caracteristique=".$_POST["id_caracteristique"]." AND id_marque=".$_POST["id_marque"];
	} else if ($hasCarac) {
		$query .= " WHERE id_caracteristique=".$_POST["id_caracteristique"];
	} else if ($hasBrand) {
		$query .= " WHERE id_marque=".$_POST["id_marque"];
	}
	$query .= " ORDER BY prix_ht"; // on ajoute le tri dans tous les cas.
 
	$res=mysql_query($query);
 
while($row = mysql_fetch_row($res)){
	echo "<option value='".$row["id_produit"]."'>".$row["description"]."</option>";
}
	echo "</select>";

Sinon pour les deux premières listes, il faut un premier option du type "choisissez une marque" ou "choissisez une caractéristique" qui n'auront pas de value, afin que la requete utilisée soit celle sans clause WHERE.

28/03/2011, 09h02
Jimmy72_
Merci je vais testé ca et je te dis ce que sa donne =D

Voila, je viens de testé et j'ai toujours un probleme avec mes deux premières listes^^
En gros, sans value, il me prend le texte dans mon option comme id, ce que je ne comprends pas.

Je ne comprends pas a quoi sert ces deux lignes de code là:
Code:

1 2 $id_caracteristique = $hasCarac ? $_POST["id_caracteristique"] : ""; $id_marque = $hasBrand ? $_POST["id_marque"] : "";
Merci de ton aide.

Pour ces deux lignes, il s'agit d'une opération ternaire.
Citation:
5.6.5.1 L'opérateur ternaire

Un autre opérateur conditionnel est l'opérateur ternaire (":?").
Assignement d'une valeur par défaut
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 <?php // Exemple d'utilisation pour l'opérateur ternaire $action = (empty($_POST['action'])) ? 'défaut' : $_POST['action']; // La ligne ci-dessus est identique à la condition suivante : if (empty($_POST['action'])) { $action = 'défaut'; } else { $action = $_POST['action']; } ?>
L'expression (expr1) ? (expr2) : (expr3) est évaluée à expr2 si expr1 est évalué à TRUE , et expr3 si expr1 est évalué à FALSE .
Note

Notez que l'opérateur ternaire est une instruction, et il n'est pas évalué en tant que variable, mais en tant que résultat de l'instruction. Il est important de savoir si vous voulez retourner une variable par référence. L'instruction return $var == 42 ? $a : $b; dans une fonction retournée par référencene fonctionnera donc pas et une alerte est émise dans les versions supérieures de PHP.
Il faut que les premiers options de tes listes aient un value vide.

Code:

<option value="">-- choisir --<\option>

. Et dans ta fonction javascript, tu peux aussi n'ajouter les paramètres que si le value n'est pas vide.(construire l'url comme la requête sql)

ok merci mais j'ai trouvé une solution^^ c'est celle ci ^^

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
if($_POST["id_marque"]>=0 && $_POST["id_caracteristique"]>=0){ // si 'id_marque' et 'id_caracteristique' est non nul
 
		//application de la requete avec comme éléments 'id_marque' et 'id_caracteristique'
 
		$sql= " SELECT DISTINCT produit.id_produit,description FROM caracteristique, produit_compatibilite, produit WHERE caracteristique.id_caracteristique = produit_compatibilite.id_caracteristique AND produit_compatibilite.id_produit = produit.id_produit AND caracteristique.id_caracteristique = ".$_POST["id_caracteristique"]." AND id_marque = ".$_POST["id_marque"].";";
 
	}else {
		if($_POST["id_marque"]>=0){ // si 'id_marque' est non nul
 
			//application de la requete avec comme éléments 'id_marque'
			$sql= " SELECT id_produit,description FROM produit WHERE id_marque = ".$_POST["id_marque"].";";	
		}
		else{
			if($_POST["id_caracteristique"]>=0){// si 'id_caracteristique' est non nul
 
				//application de la requete avec comme élément 'id_caracteristique'
				$sql= " SELECT produit.id_produit,description FROM caracteristique, produit_compatibilite, produit WHERE caracteristique.id_caracteristique = produit_compatibilite.id_caracteristique AND produit_compatibilite.id_produit = produit.id_produit AND caracteristique.id_caracteristique = ".$_POST["id_caracteristique"]."";
			}
			else{
				//sinon requete de tous les produits disponible
				$sql = " SELECT id_produit, description FROM produit " ;
			}
		}
	}

et j'ai mis comme value "-1"

sinon juste une question supplémentaire.
Je dois faire une autre onChange pour mettre a jour ma seconde liste par rapport a la première.
Est ce que je peux mettre dans mon php le code d'un premier select et d'un second ou alors faut il que je crée un autre fichier php pour exécuter mes requetes?

28/03/2011, 12h39
nadox

Tels que ton script est fait, il renvoie toujours une liste de produit. Donc il te faut un autre fichier.
28/03/2011, 14h33
Jimmy72_

d'accord, il y a t'il une possibilité de mettre sa dans un meme fichier?
28/03/2011, 15h45
nadox

Utilise un paramètre supplémentaire que tu passera "en dur" pour savoir quelle liste est concerné, par exemple.