Discussion :

[elmanu13]

Salut vous tous !

Apr�s avoir bien cherch� (puisque je sais que cette question est r�currente), je n'ai trouv� nulle part de r�ponse � mon probl�me, d'ou mon post.
Je souhaite faire en AJAX une partie d'un formulaire qui pour le moment est en pur PHP (j'ai un niveau inexistant en JS), et fonctionne tr�s bien.

Pour faire simple, j'ai un tableau de machines, de marques et mod�les vari�s, qui sont install�es chez plusieurs clients.
Dans mon formulaire, on choisi d'abord le client, ensuite la marque (filtr�e avec le choix du client), puis le mod�le (filtr� avec le client ET la marque) et enfin le nom de la machine, filtr� avec les trois param�tres d'avant.

voici mon extrait de code en php :

Code php :

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
 
<div class="bloc">
<label>Customer : </label>
   <select name="Customer" id="Customer" OnChange="this.form.submit()" />
   <option value="-1" <?php if(isset($Customer) && $Customer != -1){echo "selected";} ?> >--Choisir--</option>
<?php 
$res = mysql_query("SELECT COUNT( * ) AS Enregistrements , Customer FROM ToolBase GROUP BY Customer"); // on appelle la table pour extraire la liste des criteres
while( $val = mysql_fetch_array($res)) 
{
?>
   <option value="<?php echo $val['Customer']?>" <?php if ($Customer==$val['Customer']){echo " selected";} 
   ?>
   >
   <?php echo $val['Customer'] ?>
   </option>
 
<?php
}
   ?>
</select>
 
<label>Manufacturer : </label>
<select name="Manufacturer" id="Manufacturer" OnChange="this.form.submit()" />
   <option value="-1" <?php if(isset($Manufacturer) && $Manufacturer != -1){echo "selected";} ?> >--Choisir--</option>
<?php 
 
$res = mysql_query("SELECT COUNT( * ) AS Enregistrements , Manufacturer FROM ToolBase WHERE Customer='$Customer' GROUP BY Manufacturer"); // on appelle la table pour extraire la liste des Constructeurs, sans conditions
while( $val = mysql_fetch_array($res)) 
{
?>
   <option value="<?php echo $val['Manufacturer']?>" <?php if ($Manufacturer==$val['Manufacturer']){echo " selected";} 
   ?>
   >
   <?php echo $val['Manufacturer'] ?>
   </option>
<?php
   }?>
 
</select>
</div>
 
<div class="bloc">
<label>System Type : </label>
   <select name="System_type" id="System_type" OnChange="this.form.submit()" />
   <option value="-1" <?php if(isset($System_type) && $System_type != -1){echo "selected";} ?> >--Choisir--</option>
<?php 
// on appelle la table pour extraire la liste des systemes du constructeur choisi
 
$res = mysql_query("SELECT COUNT( * ) AS Enregistrements , System_type FROM ToolBase WHERE Customer='$Customer' AND Manufacturer='$Manufacturer'  GROUP BY System_type"); 
while( $val = mysql_fetch_array($res)) 
{
?>
   <option value="<?php echo $val['System_type']?>" <?php if ($System_type==$val['System_type']){echo " selected";} 
   ?>
   >
   <?php echo $val['System_type'] ?>
   </option>
<?php
   }?>
 
</select>
 
 
<label>Tool Name : </label>
   <select name="Tool_name" id="Tool_name" OnChange="this.form.submit()" />
   <option value="-1" <?php if(isset($Tool_name) && $Tool_name != -1){echo "selected";} ?> >--Choisir--</option>
<?php 
// on appelle la table pour extraire la liste des tools finale
 
$res = mysql_query("SELECT COUNT( * ) AS Enregistrements , Tool_name FROM ToolBase WHERE Customer='$Customer' AND Manufacturer='$Manufacturer'AND System_type='$System_type' GROUP BY Tool_name"); 
while( $val = mysql_fetch_array($res)) 
{
?>
   <option value="<?php echo $val['Tool_name']?>" <?php if ($Tool_name==$val['Tool_name']){echo " selected";} 
   ?>
   >
   <?php echo $val['Tool_name'] ?>
   </option>
<?php
   }?>
 
</select>
</div>

J'ai essay� d'adapter le tr�s bon Tuto de Lo�c Laffont, mais sans succ�s, puisqu'il ne passe que le choix de la liste N-1, et pas les autres choix...

Comment faire pour r�cup�rer dans mon fichier RetourPHP.php les choix des 2 ou 3 select pr�c�dents ??

Merci d'avance pour vos lumi�res !!

[andry.aime]

Bonsoir,

Je ne vois aucune fonction javascript moi, tu faits un submit � chaque onchange. Je ne vois pas trop le rapport avec AJAX

A+.

[bewidia]

Bonjour,

il faudrait d�j� penser � s�parer un peu le code, parce que le traitement base de donn�es au beau milieu de la vue html, c'est un peu sale.

Ensuite ton probl�me n'est pas sp�cialement difficile � r�soudre :
- ton premier <select> d�di� aux clients est peupl� au chargement de la page
- tes autres <select> seront pr�sent, mais vides (sans <option>)

sur le onChange de ton <select> d�di� aux clients, tu fais un appel Ajax vers une m�thode � laquelle tu fournis l'id du client. Le serveur le traite et construit une liste de marques qui sera ins�r�e dans ton second <select>.

sur le onChange du second <select> d�di� aux marques, tu fais un autre appel Ajax vers une m�thode qui traitement l'id de la marque et du client, tu fais une requete contenant les 2 cot� serveurs et tu peuples le 3� <select>

et tu fais de m�me jusqu'au choix de la machine.

[elmanu13]

Bonsoir,

Je ne vois aucune fonction javascript moi, tu faits un submit � chaque onchange. Je ne vois pas trop le rapport avec AJAX

A+.

J'ai pr�cis� que c'�tait mon code existant, c'est � dire en pur PHP...que je souhaite am�liorer avec de l'Ajax pour �viter de recharger ma page � chaque changement dans un select..

[elmanu13]

Bonjour,

il faudrait d�j� penser � s�parer un peu le code, parce que le traitement base de donn�es au beau milieu de la vue html, c'est un peu sale.

Ensuite ton probl�me n'est pas sp�cialement difficile � r�soudre :
- ton premier <select> d�di� aux clients est peupl� au chargement de la page
- tes autres <select> seront pr�sent, mais vides (sans <option>)

sur le onChange de ton <select> d�di� aux clients, tu fais un appel Ajax vers une m�thode � laquelle tu fournis l'id du client. Le serveur le traite et construit une liste de marques qui sera ins�r�e dans ton second <select>.

sur le onChange du second <select> d�di� aux marques, tu fais un autre appel Ajax vers une m�thode qui traitement l'id de la marque et du client, tu fais une requete contenant les 2 cot� serveurs et tu peuples le 3� <select>

et tu fais de m�me jusqu'au choix de la machine.

Merci pour la r�ponse, mais �a, c'est le principe (que j'avais bien en t�te).
Ce qu'il me manque, c'est la mani�re de le programmer, sachant que j'ai des connaissances quasi-nulles en JS...ma m�thode consiste � customiser du code existant pour l'adapter � mon besoin tout en comprenant petit � petit comment �a fonctionne (formation sur le tas, comme on dit ;-))

La vraie question, c'est comment passer 2 id (ou 3, ou 4) en ajax.

[andry.aime]

Ce qu'il me manque, c'est la mani�re de le programmer, sachant que j'ai des connaissances quasi-nulles en JS...ma m�thode consiste � customiser du code existant pour l'adapter � mon besoin tout en comprenant petit � petit comment �a fonctionne (formation sur le tas, comme on dit ;-))

Commence par lire un tutoriel Javascript, puis regarde ce tutoriel AJAX (Tu trouveras comment lier des listes).

A+.

[bewidia]

Tu peux passer autant de param�tres que tu veux en Ajax, c'est comme un formulaire que tu soumets � un script serveur.

Le plus synth�tique, c'est de faire pour chaque select une m�thode JS et PHP.

Tu dis ne pas bien connaitre le JS donc ce que je te conseille n'est peut-�tre pas l'id�al pour l'apprendre, mais jQuery permet de franchement simplifier l'acc�s aux �l�ments DOM et les requ�tes Ajax.

en HTML

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
 
<select id="clients" onChange="changeClient()">[...]</select>
<select id="marques" on Change="changeMarques()"></select>
<select id="modeles" on Change="changeModeles()"></select>

en JS

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
 
function changeClient(){
scriptServeur="/serveur/script/getMarques.php?idClient="+document.getElementById("clients").value
 
//appel serveur et recup reponse
}
 
function changeMarques(){
scriptServeur="/serveur/script/getModeles.php?idClient="+document.getElementById("clients").value+"&idMarque="+document.getElementById("marques").value
 
//appel serveur et recup reponse
}

les appels AJAX sont au choix du POST ou du GET, cot� serveur ce sont de simples scripts qui re�oivent les $_POST / $_GET, font le traitement qui va bien et r�pondent soit en html (dans ton cas) soit en xml (ou mieux de l'xml transform� en html avec xslt :p)

Bon courage

[elmanu13]

Commence par lire un tutoriel Javascript, puis regarde ce tutoriel AJAX (Tu trouveras comment lier des listes).

A+.

J'ai commenc� par �a, et j'ai d�j� appliqu� le tuto que tu me conseilles sur une partie de mon site qui n'avait besoin que de 2 selects, l'un d�pendant de l'autre.
A partir de 3 selects, le 3e d�pendant des 2 autres, �a se complexifie (un peu pour les pros, beaucoup pour moi !), et la r�ponse de Bewidia va beaucoup m'aider !!

Je vous tiens au courant quand c'est termin�, merci en tout cas !

[elmanu13]

Bon, forc�ment, sans formation de base en JS, je gal�re un peu, mais je progresse.
J'ai compris le principe, mais j'ai une double difficult� � r�soudre :
1-une s�rie de 4 SELECT inter-d�pendants les un des autres en cascade (le contenu du 4e d�pend du choix des 3 autres et pas uniquement du dernier). Je dois donc me bidouiller une fonction qui fait passer plusieurs param�tres, �a me semble faisable avec un minimum de recherche.
Une fois ces 4 select remplis, on envoie le tout vers une Database.

2-l'utilisateur doit pouvoir REVENIR sur ce formulaire, RETROUVER les choix qu'il y a fait (et qui ont donc �t� sauv�s dans une base de donn�es), et pouvoir les MODIFIER.
Il faut donc que ma fonction, en plus de pouvoir passer plusieurs param�tres, puisse r�cup�rer les valeurs de ces param�tres quand on est en mode modif (un flag en $_GET) pour ajouter la balise "selected" au choix extrait de la database.

Avant de me lancer vers une m�thode qui va ensuite me bloquer pour le point 2, si vous avez des conseils je suis preneur !!

Merci d'avance (et je vais chercher une formation JS rapidos ;-))

[bewidia]

Si c'est un nouvel enregistrement, tes select seront vides � part le premier.
Si c'est une modification, en fonction de ce qu'il y a de sauvegard� dans ton enregistrement, tu peupleras directement les 4 select avec les valeurs possibles disponibles et un selected=selected sur la valeur de l'enregistrement.

Le fonctionnement du javascript reste le m�me : il r�agit a des onChange sur les select