Menu déroulant variable - JS ou AJAX ?

**tavarlindar** · 05/11/2010, 17h45

Bonjour à tous,

Voilà, je ne sais absolument pas comment résoudre le problème ci-dessous. La solution passe-t-elle par de l’AJAX ou peut-elle être générée que par du JS ?

Mais quel est le problème ?

Voilà, j’ai une application qui fonctionne comme décrite ci-dessous :

L’application permet de dresser une liste de prestations qui seront facturées à un client. Pour chaque prestation, l’utilisateur doit préciser son fournisseur.

L’utilisateur peut ajouter autant de ligne qu’il le souhaite. Par défaut, toute nouvelle ligne de prestation créée est supposée être le fait du fournisseur numéro 1. Ce fournisseur a été défini auparavant.

Évidemment, une prestation donnée peut être fourni par un autre fournisseur. Dans ce cas, il précise dans la colonne Supplier num, un autre nombre. Imaginons, qu’on rajoute une assurance. La logique veut qu’il mette 2 pour le second fournisseur, mais s’il veut mettre 45 ou un autre nombre, il peut. Cette numérotation est propre à l’utilisateur.
Lorsqu’il saisit 2 pour la première fois, l’application crée automatiquement une seconde ligne dans le tableau des fournisseurs (suppliers). L’utilisateur doit alors préciser de quel fournisseur il s’agit via un menu déroulant.

A ce stade, on sait que l’assurance coûte 300 unités, mais on ne connait pas la devise, car on ne connait pas le fournisseur. Une fois sélectionné le fournisseur dans le menu déroulant, l’application met à jour la devise dans tous les tableaux (via l’utilisation d’AJAX) et met à jour les totaux.

Précision : on affiche une liste de fournisseurs classés par catégorie. Un même fournisseur peut appartenir à différentes catégories. Le fait que Fournisseur A apparaisse dans les catégories « delivery » et « Insurances » est donc tout à fait possible.
Ainsi si on créé une autre ligne : Moteur , nous avons au début ceci

On renseigne, les montants :

L’application se charge de mettre à jour les montants totaux (par fournisseur) via des fonctions JS.
Si on décide que Moteur est fourni par le fournisseur num = 2, on met 2 et (en toute logique) aucune nouvelle ligne « suppliers » n’est créée, puisqu’on sait déjà que 2 = Fournisseur A. Par contre en mettant 2, l’application met bien jour les montants.

Jusque là pas de problème.

Imaginons, maintenant qu‘on créer une autre ligne de presation: « Nourriture » et que l’utilisateur décide de mettre 12 dans Supplier_num. L’application va donc créer une nouvelle ligne fournisseur .

L’utilisateur peut actuellement décider que 12 est le fournisseur A. Actuellement, l’application ne l’interdit pas. Notez qu’on a mit 12, mais on aurait aussi pu mettre logiquement 3 comme numéro. Le problème n'est pas d'interdire de mettre 12, mais on doit interdire le choix Fournisseur A.

Eh c’est là le problème !

Il est impératif que ce choix ne soit pas possible. Lorsque l’utilisateur saisit 12 et quitte le champ « supplier num », l’application doit en toute logique créer une nouvelle ligne dans le tableau « Suppliers » , mais dans le menu déroulant proposé, il ne devrait pas apparaître le nom du fournisseur A, puisque déjà utilisé.

Et là je ne sais pas comment faire.

Ce que je souhaiterais donc c’est que n’apparaissent que les fournisseurs non encore utilisés au fur est à mesure.
Exemple : au départ : le menu déroulant propose tous les fournisseurs.

Puis ensuite tous les fournisseurs sauf le fournisseur A (car déjà utilisé)

Donc le 1er menu déroulant correspondant au choix du fournisseur 2 affiche tous les fournisseurs possibles.
Le 2nd menu déroulant correspondant au choix du second fournisseur (ici numéroté 12) affiche tous les fournisseurs moins le Fournisseur A , car déjà choisi.
Etc, etc.
Donc si il y a avait un autre fournisseur :

Avant que vous puissiez m’aider, encore faudrait-il que je vous explique comment fonctionne techniquement l’application. Alors voilà autant que je m’en souvienne … j’ai fait cela il y a plus d’un an !

Comment fait l’application pour savoir si il faut ou pas créer voire supprimer une ligne de fournisseur ?
L’application utilise en autre la fonction function ajoutLigneAuTableauFournisseur(num_fournisseur)

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
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
 
/* ----------- Début de la Fonction qui permet de mettre à jour le tableau fournisseur -------------------- */	
 
function ajoutLigneAuTableauFournisseur(num_fournisseur)
{
//this.num_fournisseur = num_fournisseur;
//num_fournisseur = parseInt(this.num_fournisseur);
var array_numfournisseur = new Array('1');
 
	if (!in_array (num_fournisseur,array_histo_numfournisseur))
	{
	// on met à jour l'array histo avec le nouveau numero de fournisseur 
	array_histo_numfournisseur.push(num_fournisseur);
 
 
		var tbl = document.getElementById('tabfournisseur');
		var num_founisseur = num_fournisseur;
		// ajout d'une ligne
		var row = tbl.tBodies[0].insertRow(-1);
		// céation de la cellule 0 avec dedans le numéro de fournisseur
 
		var newCell0 = row.insertCell(0);
		var textNode0 = document.createTextNode(num_founisseur);
		newCell0.appendChild(textNode0);		
 
		var newCell1 = row.insertCell(1);
		listefournisseurs = document.getElementById("id_fournisseur"); 
		copie_listefournisseurs = listefournisseurs.cloneNode(true);
		copie_listefournisseurs.setAttribute('id','id_fournisseur'+num_fournisseur);
		copie_listefournisseurs.setAttribute('name','id_fournisseur'+num_fournisseur);
		//copie_listefournisseurs.onchange = function () {'demandeServeurDevise('+num_fournisseur+')'};
		newCell1.appendChild(copie_listefournisseurs);
 
		var champDevise = document.createElement('input');
		champDevise.setAttribute('type','hidden');
		champDevise.setAttribute('size','2');
		champDevise.setAttribute('name','devise_fournisseur'+num_fournisseur);
		champDevise.setAttribute('value','');
		champDevise.setAttribute('id','devise_fournisseur'+num_fournisseur);
		newCell1.appendChild(champDevise);
 
 
		var newCell2 = row.insertCell(2);
		var montantAchat = document.createElement('input');
		montantAchat.setAttribute('type','text');
		montantAchat.setAttribute('size','14');
		montantAchat.setAttribute('name','montantAchatFournisseur'+num_fournisseur);
		montantAchat.setAttribute('value','0');
		montantAchat.setAttribute('id','montantAchatFournisseur'+num_fournisseur);
		montantAchat.className='tab_input_nombre_monnetaire_gris';
		montantAchat.setAttribute('readOnly',true);
		newCell2.appendChild(montantAchat);
 
		var champtab_num_fournisseur = document.createElement('input');
		champtab_num_fournisseur.setAttribute('type','hidden');
		champtab_num_fournisseur.setAttribute('size','6');
		champtab_num_fournisseur.setAttribute('name','tab_num_fournisseur');
		champtab_num_fournisseur.setAttribute('id','tab_num_fournisseur');
		champtab_num_fournisseur.setAttribute('value','');
		newCell2.appendChild(champtab_num_fournisseur);
 
		var champid_fourniture_services = document.createElement('input');
		champid_fourniture_services.setAttribute('type','hidden');
		champid_fourniture_services.setAttribute('size','6');
		champid_fourniture_services.setAttribute('name','id_fourniture_services');
		champid_fourniture_services.setAttribute('value','');
		newCell2.appendChild(champid_fourniture_services);
 
 
		for (var i = 0 ; i < array_histo_numfournisseur.length ; i++){
		tbl.tBodies[0].rows[i].className = 'bleu'+(i%2);
		}
 
 
	}
 
// initialisation des array à 0 pour tous les numéros de fournisseur utilisés
for (var f=0; f<(1+nbLignesInclus+nbLignesOptions+nbLignesRemises+nbLignesCommission);f++)
{
var numerofournisseur = document.getElementById("num_fournisseur"+f).value;
//var numerofournisseur_numeric = parseInt(numerofournisseur);
		if (!in_array (numerofournisseur,array_numfournisseur))
			{
			array_numfournisseur.push(numerofournisseur);
			}
}
//alert('array_numfournisseur :' +array_numfournisseur.join(" - ") ); 
//alert('array_histo_numfournisseur :' +array_histo_numfournisseur.join(" - ") ); 
 
for (var z=0; z< array_histo_numfournisseur.length; z++) 
{
			if (!in_array (array_histo_numfournisseur[z],array_numfournisseur))
			{
			// suprresion de la ligne dans le tableau fournisseur vu que le numéro du fournisseur n'est plus utilisé
			supprimerFournisseur(array_histo_numfournisseur[z]);
 
			// mise à jour de l'array histo
			array_histo_numfournisseur.splice(z,1);
			}
}	
CalculMontantFournisseur();
}	/* ----------- fin de la fonction  -------------------- */	
 
 
 
/* ----------- IN_ARRAY -------------------- */
function in_array(myValue,myArray) {
function equals(a,b) { return (a === b); }
for (var i in myArray) {
if (equals(myArray[i],myValue)) return true;
}
return false;
}

On gère une notion de champ caché où on stocke les num_fournisseur utilisés. Lorsqu’on crée une ligne avec un numéro de fournisseur, l’application analyse si ce numéro a déjà été utilisé ou non. Si le numéro en question a déjà été utilisé, on ne créé pas de nouvelle ligne dans le tableau Supplier. Si on créé un nouveau numéro de fournisseur, l’application crée une nouvelle ligne dans le tableau et enfin au cas où on supprimerait un numéro, l’application supprime du tableau la ligne fournisseur concernée. Aucun bug à ce niveau là.

Le problème vient de là :

Lorsqu’on créer un nouveau num_fournisseur, l’application créer en toute logique une nouvelle ligne dans le tableau « suppliers ».

Pour ce faire je fais :

Code :

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

1
2
3
4
5
6
7
8
 
var newCell1 = row.insertCell(1);
		listefournisseurs = document.getElementById("id_fournisseur"); 
		copie_listefournisseurs = listefournisseurs.cloneNode(true);
		copie_listefournisseurs.setAttribute('id','id_fournisseur'+num_fournisseur);
		copie_listefournisseurs.setAttribute('name','id_fournisseur'+num_fournisseur);
		//copie_listefournisseurs.onchange = function () {'demandeServeurDevise('+num_fournisseur+')'};
		newCell1.appendChild(copie_listefournisseurs);

le seul moyen que j’ai trouvé à l’époque pour créer le champ select est de faire une copie d’un champ select caché.

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
 
<div style='display:none;'>
	<select name="id_fournisseur" tabindex="1" id="id_fournisseur" onchange='demandeServeurDevise(this)' onFocus="this.className='focus';" onBlur="this.className='normal';">
		<option  value="0">Select a supplier</option>
<? 
$req_categorie_fournisseur = "SELECT id_categorie_fournisseur, categorie_fournisseur_lib_anglais
FROM fournisseur f
LEFT JOIN fournisseur_categorie_fournisseur fcf ON f.id_fournisseur = fcf.fournisseur_id
LEFT JOIN categorie_fournisseur cf ON fcf.categorie_fournisseur_id = cf.id_categorie_fournisseur
WHERE fcf.categorie_fournisseur_id != '1'
AND f.groupe_id = '0'
AND f.f_actif = 'Y'
GROUP BY categorie_fournisseur_lib_anglais";
$categorie_fournisseur = ExecRequete($req_categorie_fournisseur, $connexion);
while ($listecategoriefournisseur = mysql_fetch_object($categorie_fournisseur)){
					print("<optgroup label=".$listecategoriefournisseur->categorie_fournisseur_lib_anglais.">");
					$req_fournisseur= "SELECT id_fournisseur, nom_fournisseur 
										FROM fournisseur f 
										LEFT JOIN fournisseur_categorie_fournisseur fcf on f.id_fournisseur=fcf.fournisseur_id 
										LEFT JOIN categorie_fournisseur cf on fcf.categorie_fournisseur_id =cf.id_categorie_fournisseur
										WHERE fcf.categorie_fournisseur_id !='1' 
 
										AND f.f_actif='Y'
										AND fcf.categorie_fournisseur_id =".$listecategoriefournisseur->id_categorie_fournisseur."
										ORDER BY 'nom_fournisseur'";
					$fournisseur_dela_categorie = ExecRequete($req_fournisseur, $connexion);
					while ($listefournisseur = mysql_fetch_object($fournisseur_dela_categorie)){
					if($listefournisseur->id_fournisseur==$_POST['id_fournisseur1']){$ct1="selected";}
					print("<option ".$ct1." value=".$listefournisseur->id_fournisseur.">".$listefournisseur->nom_fournisseur."</option>");
					unset($ct1);
					}
 
					print("</optgroup>");
					}?>
</select>
</div>

En d’autres termes, lorsque la page se charge, ce champ select (id="id_fournisseur") est connu. Quelque soient les fournisseurs utilisés ou pas, ce menu déroulant reste invariable. Et c’est bien là où est le problème !

Je ne sais absolument pas comment m’y prendre.

**Bovino** · 06/11/2010, 15h31

Dans l'idée, le truc serait de récupérer les identifiants de tous les fournisseurs sélectionnés, puis de boucler sur les options de ton select et d'utiliser la méthode remove() de l'objet select pour supprimer les options non sélectionnables.
Attention toutefois, remove() va modifier les indices des options, il faut donc faire une boucle inversée :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
var objFournisseurs = {
    numero1: 'fournisseur1',
    numero2: 'fournisseur2',
    ...
    numeroX: 'fournisseurX'
};
var listefournisseurs = document.getElementById("id_fournisseur");
var itemsfournisseurs = listefournisseurs.getElementsByTagName('option'), nbItems = itemsfournisseurs.length;
while(nbItems--){
    if(itemsfournisseurs[nbItems].value in objFournisseurs){
        listefournisseurs.remove(nbItems);
    }
}

**tavarlindar** · 08/11/2010, 17h49

Bonjour Bovino,

Tout d’abord, merci pour votre intervention.
Je pense aussi que dans l’idée, votre approche peut aboutir positivement.
Malheureusement, je n’ai pas réussi à la mettre en œuvre. Je dois avouer que javascript ne m’est pas très familier et se replonger dedans un an après, encore moins.

Lorsque vous écrivez :

var objFournisseurs = {
numero1: 'fournisseur1',
numero2: 'fournisseur2',
...
numeroX: 'fournisseurX'
};

Pouvez-vous m’indiquez à quoi correspond le numero1:, le numero2:, etc.
Est-ce que si j’obtiens un objFournisseurs ={1012,52,5260, 96589} est bon ?
Où 1012,52,5260, 96589 sont les identifiants utilisés dans la base de données.
Si on obtient donc une liste des identifiants utilisés comme value dans le select, est-ce ok ?
Le sélect utilisé ressemble à ceci :

la valeur utilisée (exemple option value="540") correspond au id_fournisseur de mysql.
Si le fait d’obtenir la liste des identifiants fournisseur déjà utilisé est la bonne approche, comment le faire ?
Sachant que je gère une variable que j’appelle : array_histo_numfournisseur qui contient les numéros donnés par l’utilisateur, je pense pouvoir me débrouiller.

Ensuite, juste après le code qui permet de créer le nouveau select j’ai mis le code :

Code :

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

1
2
3
4
5
6
7
8
9
10
 
var nlle_listefournisseurs = document.getElementById("id_fournisseur"+num_fournisseur);
		var itemsfournisseurs = nlle_listefournisseurs.getElementsByTagName('option'), nbItems = itemsfournisseurs.length;	
 
		while(nbItems--){
			if(itemsfournisseurs[nbItems].value in objFournisseurs){
			listefournisseurs.remove(nbItems);
 
				}
			}

Pour le moment rien ne fonctionne, mais je pense qu’il ne manque pas grand-chose …

Au plaisir de vous relire ,

Tavar

**Bovino** · 08/11/2010, 18h12

Est-ce que si j’obtiens un objFournisseurs ={1012,52,5260, 96589} est bon ?

Non, ce n'est pas correct car la syntaxe d'un objet est de type nom: valeur, or dans ton cas, il n'y a que des propriétés, cela doit donc renvoyer une erreur (en plus, un nom d'identifiant ne doit en principe pas commencer par un chiffre

), c'est pour ça que dans mon exemple, j'ai associé l'identifiant à une valeur (par exemple le nom du fournisseur), ce qui permet d'avoir une syntaxe correcte même si le nom n'est pas forcément utile.
Ensuite, l'opérateur in permet de vérifier la présence d'une propriété pour un objet.

**tavarlindar** · 08/11/2010, 18h48

Re bonjour,

merci pour cette réponse rapide, néanmoins, je ne suis pas à ton niveau.

J'ai mis ce code histoire de tester et aucun bug à priori, mais rien de se passe : le select qui se crée est identique au select qui me sert de modèle.

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
 
var objFournisseurs = {
			520:'The Idea Travel Company',
			443:'12345 Fourn. Test'
		}
 
 
		var nlle_listefournisseurs = document.getElementById("id_fournisseur"+num_fournisseur);
		var itemsfournisseurs = nlle_listefournisseurs.getElementsByTagName('option'), nbItems = itemsfournisseurs.length;	
 
		while(nbItems--){
			if(itemsfournisseurs[nbItems].value in objFournisseurs){
			listefournisseurs.remove(nbItems);
 
				}
			}

**Bovino** · 08/11/2010, 19h54

en plus, un nom d'identifiant ne doit en principe pas commencer par un chiffre

Essaye avec

Code :

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

1
2
3
4
var objFournisseurs = {
    '520':'The Idea Travel Company',
    '443':'12345 Fourn. Test'
}

pour contourner cette contrainte.

**tavarlindar** · 08/11/2010, 21h35

Cela ne fonctionne toujours pas. Néanmoins on en est pas loin.

Cela a rien avoir à priori avec les quotes.

520 : 'The Idea Travel Company' ou '520' : 'The Idea Travel Company'

Si je crée un nouveau fournisseur (num = 5), l'application crée bien une nouvelle ligne fournisseur avec un select qui reprend à l'identique tous les choix possibles.
Si j'en crée un autre (num = 6), on va avoir un nouveau select qui tient cette fois-ci des restrictions.
520:'The Idea Travel Company',
443:'12345 Fourn. Test'

ces choix ne sont plus visibles.

J'ai testé avec

Code :

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

var nlle_listefournisseurs = document.getElementById('id_fournisseur'+num_fournisseur);

ou

Code :

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

1
2
 
var nlle_listefournisseurs = document.getElementById('id_fournisseur');

on obtient le même résultat.

Bizarrement, si je créer une nouvelle ligne de prestations, je lui affecte un autre numéro de fournisseur non encore défini, l'application crée donc un nouveau select. Pas de surprise, le select est complet et ne tient pas compte des restrictions . Je supprime la ligne de prestations que je viens de créée. L'application supprime logiquement de la liste des fournisseurs, le dernier que j'avais défini. Je recrée la ligne de prestation en définissant un nouveau numéro de fournisseur, et bien là le nouveau select créé est à jour. Il tient compte des restrictions.

Donc, ton approche est bonne, il y a un petit truc qui fait que cela ne fonctionne pas du premier coup.

**tavarlindar** · 08/11/2010, 22h03

Code :

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

1
2
 
nlle_listefournisseurs.remove(nbItems);

et non pas

Code :

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

1
2
 
listefournisseurs.remove(nbItems);

reste maintenant à créer l'objet objFournisseurs ....

Comment fait-on ? N'y a-t-il pas moyen d'utiliser la notion d'array ? Je ne sais pas construire l'objet comme tu la défini

Code :

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

1
2
3
4
5
6
var objFournisseurs = {
    numero1: 'fournisseur1',
    numero2: 'fournisseur2',
    ...
    numeroX: 'fournisseurX'
};

bien qu'en y regardant de plus près cela ressemble à un array associatif, non ?

Sinon, je suis parvenu au résultat souhaité en faisant :

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
 
// On défini un array qui contient tous les id_fournisseurs deja utilises avant la creation du nouveau fournisseur
 
		var array_id_fournisseurs_deja_utilises =new Array();
		for (var f=1; f<(array_histo_numfournisseur.length-1);f++) // f=1 parceque f=0 a forcement la valeur 1 car il s agit du provider. Donc f=0 n est pas utile
		//array_histo_numfournisseur.length-1 parceque array_histo_numfournisseur est déjà à jour du nouveau numfournisseur en cours de creation
		{
 
			var numerofournisseur_precedent = array_histo_numfournisseur[f];
			var champ_select_fournisseur = document.getElementById('id_fournisseur'+numerofournisseur_precedent); 
			var valeur_id_fournisseur = champ_select_fournisseur.options[champ_select_fournisseur.selectedIndex].value;
			// on met à jour l'array_id_fournisseurs_deja_utilises avec les id_fournisseur
 
			array_id_fournisseurs_deja_utilises.push(valeur_id_fournisseur);
		}
 
 
		var nlle_listefournisseurs = document.getElementById('id_fournisseur'+num_fournisseur);
		var itemsfournisseurs = nlle_listefournisseurs.getElementsByTagName('option'), nbItems = itemsfournisseurs.length;	
 
		while(nbItems--){
			if(in_array (itemsfournisseurs[nbItems].value,array_id_fournisseurs_deja_utilises)){
			nlle_listefournisseurs.remove(nbItems);
 
				}
			}

Merci encore Bovino. Ton approche et ton code m'ont bien aidé. Merci.

Bien à toi,

Tavar

Menu déroulant variable - JS ou AJAX ?

JavaScript

Discussions similaires

Partager

Partager