Précédent   Forum des professionnels en informatique > Webmasters - Développement Web > AJAX
AJAX Forum sur la programmation AJAX. Avant de poster : Cours AJAX, FAQ AJAX, Toutes les FAQ JavaScript
Partagez cette discussion sur d'autres réseaux sociaux : Viadeo Twitter Google Facebook Digg Delicious MySpace Yahoo
Réponse Proposer ce sujet en actualité
 
Outils de la discussion
Publicité
'
Vieux 06/09/2011, 22h12   #1
Invité de passage
 
Homme
Ingénieur après-vente
Inscription : mai 2011
Messages : 11
Détails du profil
Informations personnelles :
Sexe : Homme
Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

Informations professionnelles :
Activité : Ingénieur après-vente
Secteur : High Tech - Électronique et micro-électronique

Informations forums :
Inscription : mai 2011
Messages : 11
Points : 4
Points : 4
Par défaut 4 listes liées en PHP/MySQL/AJAX

Bonsoir tout le monde,

Une question récurrente ici, mais toutefois toujours légèrement différente me pousse à ouvrir une nouvelle discussion pour mon problème.

J'ai une base de données de machines qui sont de constructeurs différents, et installées chez différent clients.
Ca donne à peu près les clés de table MySQL suivantes :
Client, Constructeur, Type, Modèle.

Je souhaite extraire dans une page UNE machine (pour remplir un rapport d'intervention OnLine) en choisissant dans l'ordre le client, ensuite le constructeur, le type et enfin le modèle de la machine.
Pour le moment, je fais ça en pur PHP et ça fonctionne très bien, avec l'inconvénient de recharger la page à chaque changement dans mes listes.
Je voudrais donc mettre un peu d'AJAX histoire de me compliquer la vie ;-)

Une machine de même type et constructeur pouvant être installée chez différent clients, mes requêtes mySQL pour construire les 4 listes vont être les suivantes :
Liste des clients :
Code :
$res = mysql_query("SELECT COUNT( * ) AS Enregistrements , Customer FROM ToolBase GROUP BY Customer");
Liste des Constructeurs (filtrée en fonction du client)
Code :
$res = mysql_query("SELECT COUNT( * ) AS Enregistrements , Manufacturer FROM ToolBase WHERE Customer='$Customer' GROUP BY Manufacturer");
Liste des Types (du constructeur choisi, installé chez le client choisi) :
Code :
$res = mysql_query("SELECT COUNT( * ) AS Enregistrements , System_type FROM ToolBase WHERE Customer='$Customer' AND Manufacturer='$Manufacturer'  GROUP BY System_type");
Et enfin, liste des machines de constructeur et type choisis installées chez le client choisi :
Code :
$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");
Pour faire ma fonction de listes interractives, j'ai trouvé une base qui se rapproche le plus de ce que je souhaite faire, à savoir un exemple donné par Jreau62 que vous trouverez ici : http://www.developpez.net/forums/d11...s/#post6212207

Mon (premier) problème, c'est que cet exemple ne fonctionne qu'une seule fois (je n'ai testé pour l'instant que l'interraction de la première liste sur la deuxième), c'est à dire que le choix de la liste 1 modifie bien l'affichage de la liste 2, mais une seule fois. Si je modifie mon choix de la liste 1, la liste2 ne bouge plus.
Je suppose qu'il y a quelque part un rafraichissement qui ne se fait pas, mais je n'arrive pas à trouver ou...

Quelqu'un avec de meilleurs yeux que moi pourrait-il me venir en aide ??

Merci d'avance !!
elmanu13 est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 06/09/2011, 22h20   #2
Invité de passage
 
Homme
Ingénieur après-vente
Inscription : mai 2011
Messages : 11
Détails du profil
Informations personnelles :
Sexe : Homme
Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

Informations professionnelles :
Activité : Ingénieur après-vente
Secteur : High Tech - Électronique et micro-électronique

Informations forums :
Inscription : mai 2011
Messages : 11
Points : 4
Points : 4
pour être tout à fait complet, voilà mon exemple de départ qui ne fonctionne pas :
La page dans laquelle sera affichée mes 4 listes :
test.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
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<html>
<body>
<script type="text/javascript">
	/* Initialisation XMLHttpRequest */
	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 changeLesListes(num){
		var num; // numero de la liste a partir de laquelle on va faire les changements
		var div1 = document.getElementById('ididliste1');
		var div2 = document.getElementById('ididliste2');
		var div3 = document.getElementById('ididliste3');
		var val1 = div1.options[div1.selectedIndex].value;
		var val2 = div2.options[div2.selectedIndex].value;
		var val3 = div3.options[div3.selectedIndex].value;
		// SI la liste 1 a changé
		if(num==1) { 
			changeListFromList(val1,0,0,2,'iddivListe2'); // liste 2 -> on modifie
			changeListFromList(val1,0,0,3,'iddivListe3'); // liste 3 -> defaut
			changeListFromList(val1,0,0,4,'iddivListe4'); // liste 4 -> defaut
		// SI la liste 2 a changé
		} else if(num==2) {
			changeListFromList(val1,val2,0,3,'iddivListe3'); // liste 3 -> on modifie
			changeListFromList(val1,val2,0,4,'iddivListe4'); // liste 4 ->defaut
		// SI la liste 3 a changé
		} else if(num==3) {
			changeListFromList(val1,val2,val3,4,'iddivListe4'); // liste 4 -> on modifie
		}
	};
 
	/* Changer la liste n+1 après choix dans la liste n */
	function changeListFromList(val1,val2,val3,numliste,iddiv){
		var val1; // valeur de l option choisie (liste 1)
		var val2; // valeur de l option choisie (liste 2)
		var val3; // valeur de l option choisie (liste 3)
		var numliste; // numero de la liste A MODIFIER 
		// -> pour le nom de fichier a utiliser : listeslieesAjax-liste2.php, listeslieesAjax-liste3.php ou listeslieesAjax-liste4.php
		var iddiv; // id du div qu'on remplira
 
		var xhr = getXhr();
		xhr.onreadystatechange = function(){
			// si on a tout reçu et que le serveur est ok
			if(xhr.readyState == 4 && xhr.status == 200)
			{
				texthtml = xhr.responseText;
				// On se sert de innerHTML pour rajouter les options a la liste des "selections"
				document.getElementById(iddiv).innerHTML = texthtml;
			}
		}
		// on defini la methode (post) + le fichier de traitement + asynchrone (true)
		xhr.open("POST","liste"+numliste+".php",true);
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		// on poste les parametres a transmettre au fichier qui fera le traitement
		xhr.send("val1="+val1+"&val2="+val2+"&val3="+val3);
	};
	</script>
 
	<form method="post" action="test.php">
	<fieldset style="width:550px;">
		<legend>Listes liées</legend>
		<p>
			<label>Liste 1 : </label>
			<select id="ididliste1" name="idliste1" onchange="changeLesListes(1);">
			<!-- on appelle la fct sur le onchange (valeur-choisie, id-du-div-à-remplir) -->
				<option value="0">Choisissez ...</option>
				<option value="1">choix1</option>
				<option value="2">choix2</option>
				<option value="3">choix3</option>
			</select>	
		</p>
		<p>
			<label>Liste 2 : </label>
			<span id="iddivListe2"><!-- par innerHTML AJAX va ecrire la liste 2 -->
			<!-- on peut mettre d abord une option "par defaut" : -->
			<select id="ididliste2" name="idliste2">
				<option value="0">(Choisissez avant dans la liste 1)</option>
			</select>
			</span>	
		</p>
		<p>
			<label>Liste 3 : </label>
			<span id="iddivListe3"><!-- par innerHTML AJAX va ecrire la liste 3 -->
			<!-- on peut mettre d abord une option "par defaut" : -->
			<select id="ididliste3" name="idliste3">
				<option value="0">(Choisissez avant dans la liste 2)</option>
			</select>
			</span>	
		</p>
		<p>
			<label>Liste 4 : </label>
			<span id="iddivListe4"><!-- par innerHTML AJAX va ecrire la liste 4 -->
			<!-- on peut mettre d abord une option "par defaut" : -->
			<select id="ididliste4" name="idliste4">
				<option value="0">(Choisissez avant dans la liste 3)</option>
			</select>
			</span>	
		</p>
		<p>
			<input type="submit" name="btenvoi" value="ok" />
		</p>
	</fieldset>
	</form>
 
</body>
</html>
Et ensuite les pages de traitement (il y en a donc 3)
liste2.php
Code :
1
2
3
4
5
6
7
8
9
10
11
12
<?php 
// [ ......................]
// Ajax : Changer la liste 2 après choix dans la liste 1
if(isset($_POST['val1']) && is_numeric($_POST['val1']) && $_POST['val1']!=0)
{
	// recuperation de id_liste1
	$id_liste1_selected = intval($_POST['val1']);
	//affichage du choix de la liste 1 pour test :
	echo "choix 1 :".$id_liste1_selected;
// [ ......................]
}
?>
qui ne fonctionne qu'une seule fois...
(pas besoin de mettre liste3 et liste4, je n'en suis pas encore là...)
elmanu13 est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 07/09/2011, 07h11   #3
Rédacteur
 
Avatar de jreaux62
 
Homme Jérôme Réaux
Webdesigner
Inscription : août 2008
Messages : 2 994
Détails du profil
Informations personnelles :
Nom : Homme Jérôme Réaux
Âge : 45
Localisation : France, Pas de Calais (Nord Pas de Calais)

Informations professionnelles :
Activité : Webdesigner
Secteur : Arts - Culture

Informations forums :
Inscription : août 2008
Messages : 2 994
Points : 5 787
Points : 5 787
Envoyer un message via Skype™ à jreaux62
Bonjour,
Citation:
Envoyé par elmanu13 Voir le message
cet exemple ne fonctionne qu'une seule fois
Ca, c'est effectivement étrange !
Le code de la première liste n'est pas modifié. On a toujours :
Code :
1
2
			<select id="ididliste1" name="idliste1" onchange="changeLesListes(1);">
				<option value="0">Choisissez ...</option>
Ca devrait fonctionner.
[Edit] J'ai testé : ca fonctionne pour moi.

ps : modifier (ou supprimer) le commentaire
Citation:
<!-- on appelle la fct AJAX sur le onchange (valeur-choisie, id-du-div-à-remplir) -->
=> QUESTION : TOUTES les "value" des <option> sont bien numériques ?
Car dans liste2.php (et les autres), le test se fait sur : "val1 doit être numérique et différent de 0"
Code :
if(isset($_POST['val1']) && is_numeric($_POST['val1']) && $_POST['val1']!=0)
Peux-tu montrer :
1/ ton formulaire initial, (de <form ...> à </form>)
2/ ton script JavaScript, (OK)
3/ ton code de liste2.php ? (avec le <select>)
Tu es censé avoir :
Code :
			<select id="ididliste2" name="idliste2" onchange="changeLesListes(2);">
Idem dans liste3.php :
Code :
			<select id="ididliste3" name="idliste3" onchange="changeLesListes(3);">
J'ai oublié de le préciser dans l'autre discussion : Plusieurs listes liées
__________________
"Ce qui se conçoit bien s'énonce clairement - Et les mots pour le dire arrivent aisément."
Nicolas Boileau-Despréaux, Homme de lettres français (1636-1711), principal théoricien de l'esthétique classique.
Site perso Mes tutos DVP : Gestion-Affichage de Nouvelles - Affichage en tableau HTML - Fonctions de redimensionnement d'images
jreaux62 est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 07/09/2011, 09h18   #4
Invité de passage
 
Homme
Ingénieur après-vente
Inscription : mai 2011
Messages : 11
Détails du profil
Informations personnelles :
Sexe : Homme
Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

Informations professionnelles :
Activité : Ingénieur après-vente
Secteur : High Tech - Électronique et micro-électronique

Informations forums :
Inscription : mai 2011
Messages : 11
Points : 4
Points : 4
merci pour cette réponse matinale.
Pour le moment, mon test n'a pas de liste ni de select dans les fichiers liste2, liste3 et liste4, ces fichiers affichent juste le choix fait en liste 1 (pour voir si ça marche)
Les 2 fichiers de mon 2eme post sont donc tout ce que j'ai : le formulaire (avec le script inclus) et le fichier liste2.
Je vais essayer de mettre des select pour voir.

Et oui, pour le moment aussi, toutes les values des options sont numériques (quand je changerai pour du texte, je changerai également la condition)

Pourrais-tu m'envoyer la source de ce qui fonctionne chez toi ?

La seule erreur que me renvoie la console erreur de FF, quand je fais mon deuxième choix sur la liste 1, c'est "div3 is null" dans la ligne du script
Code :
var val3 = div3.options[div3.selectedIndex].value;
elmanu13 est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 07/09/2011, 09h23   #5
Rédacteur
 
Avatar de jreaux62
 
Homme Jérôme Réaux
Webdesigner
Inscription : août 2008
Messages : 2 994
Détails du profil
Informations personnelles :
Nom : Homme Jérôme Réaux
Âge : 45
Localisation : France, Pas de Calais (Nord Pas de Calais)

Informations professionnelles :
Activité : Webdesigner
Secteur : Arts - Culture

Informations forums :
Inscription : août 2008
Messages : 2 994
Points : 5 787
Points : 5 787
Envoyer un message via Skype™ à jreaux62
liste2.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
30
<?php 
// Ajax : Changer la liste 2 après choix dans la liste 1
if(isset($_POST['val1']) && is_numeric($_POST['val1']) && $_POST['val1']!=0)
{
	// recuperation de id_liste1
	$id_liste1_selected = intval($_POST['val1']);
?>
			<select id="ididliste2" name="idliste2" onchange="changeLesListes(2);">
				<option value="0">Choisissez ...</option>
<?php if ($id_liste1_selected == 1) { ?>
				<option value="11">choix 1-11</option>
				<option value="22">choix 1-22</option>
				<option value="33">choix 1-33</option>
<?php } elseif ($id_liste1_selected == 2) { ?>
				<option value="44">choix 2-44</option>
				<option value="55">choix 2-55</option>
<?php } elseif ($id_liste1_selected == 3) { ?>
				<option value="66">choix 3-66</option>
				<option value="77">choix 3-77</option>
<?php } ?>
			</select>
<?php
} else { 	// SI PAS de liste 1 choisie (0) ou erreur : on remet le select "par defaut" :
?>
			<select id="ididliste2" name="idliste2">
				<option value="0">(Choisissez avant dans la liste 1)</option>
			</select>
<?php
}
?>
liste3.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
30
31
32
<?php 
// Ajax : Changer la liste 3 après choix dans la liste 2
if(isset($_POST['val2']) && is_numeric($_POST['val2']) && $_POST['val2']!=0)
{
	// recuperation de id_liste2
	$id_liste2_selected = intval($_POST['val2']);
?>
			<select id="ididliste3" name="idliste3" onchange="changeLesListes(3);">
				<option value="0">Choisissez ...</option>
<?php if ($id_liste2_selected == 11) { ?>
				<option value="111">choix 1-11-111</option>
				<option value="222">choix 1-11-222</option>
				<option value="333">choix 1-11-333</option>
<?php } elseif ($id_liste2_selected == 22) { ?>
				<option value="444">choix 1-22-444</option>
				<option value="555">choix 1-22-555</option>
<?php } elseif ($id_liste2_selected == 33) { ?>
				<option value="666">choix 1-33-666</option>
<?php } elseif ($id_liste2_selected == 44) { ?>
				<option value="777">choix 1-22-777</option>
				<option value="888">choix 1-22-888</option>
<?php } ?>
			</select>
<?php
} else { 	// SI PAS de liste 2 choisie (0) ou erreur : on remet le select "par defaut" :
?>
			<select id="ididliste3" name="idliste3">
				<option value="0">(Choisissez avant dans la liste 2)</option>
			</select>
<?php
}
?>
liste4.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
30
31
32
<?php 
// Ajax : Changer la liste 4 après choix dans la liste 3
if(isset($_POST['val3']) && is_numeric($_POST['val3']) && $_POST['val3']!=0)
{
	// recuperation de id_liste3
	$id_liste3_selected = intval($_POST['val3']);
?>
			<select id="ididliste4" name="idliste4">
				<option value="0">Choisissez ...</option>
<?php if ($id_liste3_selected == 111) { ?>
				<option value="1111">choix 1-11-111-1111</option>
				<option value="2222">choix 1-11-111-2222</option>
<?php } elseif ($id_liste3_selected == 222) { ?>
				<option value="3333">choix 1-11-222-3333</option>
				<option value="4444">choix 1-22-222-4444</option>
				<option value="5555">choix 1-22-222-5555</option>
<?php } elseif ($id_liste3_selected == 333) { ?>
				<option value="6666">choix 1-33-333-6666</option>
<?php } elseif ($id_liste3_selected == 444) { ?>
				<option value="7777">choix 1-22-444-7777</option>
				<option value="8888">choix 1-22-444-8888</option>
<?php } ?>
			</select>
<?php
} else { 	// SI PAS de liste 2 choisie (0) ou erreur : on remet le select "par defaut" :
?>
			<select id="ididliste4" name="idliste4">
				<option value="0">(Choisissez avant dans la liste 2)</option>
			</select>
<?php
}
?>
A noter, comme liste4 est la dernière :
Code :
			<select id="ididliste4" name="idliste4">
Alors que les autres :
Code :
			<select id="ididliste2" name="idliste2" onchange="changeLesListes(2);">
Code :
			<select id="ididliste3" name="idliste3" onchange="changeLesListes(3);">
__________________
"Ce qui se conçoit bien s'énonce clairement - Et les mots pour le dire arrivent aisément."
Nicolas Boileau-Despréaux, Homme de lettres français (1636-1711), principal théoricien de l'esthétique classique.
Site perso Mes tutos DVP : Gestion-Affichage de Nouvelles - Affichage en tableau HTML - Fonctions de redimensionnement d'images
jreaux62 est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 07/09/2011, 09h39   #6
Invité de passage
 
Homme
Ingénieur après-vente
Inscription : mai 2011
Messages : 11
Détails du profil
Informations personnelles :
Sexe : Homme
Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

Informations professionnelles :
Activité : Ingénieur après-vente
Secteur : High Tech - Électronique et micro-électronique

Informations forums :
Inscription : mai 2011
Messages : 11
Points : 4
Points : 4
Damned, comme ça, ça fonctionne au poil.
Je n'avais pas mis les "else" dans mes listes2,3 pour afficher la liste par défaut en cas d'erreur ou de nouveau choix.
Ca veut dire que si on arrive pas boucler toutes les infos sur les 4 listes ça bloque ?

En tout cas merci pour cette base de départ, je pense qu'avec quelques modifs je vais réussir à faire fonctionner mon truc.

Parfait !
elmanu13 est déconnecté   Envoyer un message privé Réponse avec citation 00
Vieux 07/09/2011, 10h04   #7
Rédacteur
 
Avatar de jreaux62
 
Homme Jérôme Réaux
Webdesigner
Inscription : août 2008
Messages : 2 994
Détails du profil
Informations personnelles :
Nom : Homme Jérôme Réaux
Âge : 45
Localisation : France, Pas de Calais (Nord Pas de Calais)

Informations professionnelles :
Activité : Webdesigner
Secteur : Arts - Culture

Informations forums :
Inscription : août 2008
Messages : 2 994
Points : 5 787
Points : 5 787
Envoyer un message via Skype™ à jreaux62
Non.
Ce qui peut éventuellement "bloquer" (ou empêcher un bon fonctionnement), ce serait d'avoir une erreur dans un des fichiers, car cette erreur ne va pas s'afficher à l'écran (vu que ce fichier est appelé via Ajax, et qu'il est "invisible" à l'écran)

Ici, j'ai mis des if-esleif pour l'exemple (c'était plus simple et suffisant pour les tests).
Mais on peut très bien faire un appel en base de données, ou afficher le contenu d'un array.
__________________
"Ce qui se conçoit bien s'énonce clairement - Et les mots pour le dire arrivent aisément."
Nicolas Boileau-Despréaux, Homme de lettres français (1636-1711), principal théoricien de l'esthétique classique.
Site perso Mes tutos DVP : Gestion-Affichage de Nouvelles - Affichage en tableau HTML - Fonctions de redimensionnement d'images
jreaux62 est déconnecté   Envoyer un message privé Réponse avec citation 00
Réponse Proposer ce sujet en actualité Cette discussion est résolue.
Outils de la discussion



Fuseau horaire GMT +2. Il est actuellement 22h09.


 
 
 
 
Partenaires

Hébergement Web