Listes Dynamiques liées

**Aroen** · 05/09/2016, 12h07

Bonjour tous le monde

Je rencontre un problème sur lequel je me casse la tête depuis plusieurs jours... venez-moi en aide avant que je m'arrache les cheveux

. Je vous explique !

Le programme (Graphique) ressemble à ceci :

Nom : Img1.png
Affichages : 452
Taille : 136,0 Ko

#Je vous explique le fonctionnement , même si en soit je ne pense pas que vous ayez besoin de le connaitre pour essayer de m'aider à résoudre mon problème#

(1) -- C'est la liste des Items du client, on peut en ajouter de nouveaux ou en supprimer.
(2) -- Ce sont des PACKS d'Items. Pour exemple, le pack "Vacation juridique portant sur adjonction d'activite" regroupe les items : Vacation, Timbre fiscaux et Liasse fiscale.
Si l'on transfert l'un des packs d'Items vers la gauche, ce sont les items précédemment mentionnés qui iront s'y inscrire.
(3) -- C'est la liste entiere des items disponnible, qui nous permettent de faire des ajouts "A la carte".

Mon problème :

Mon problème est "simple".
Comme vous pouvez le voir , j'arrive à afficher correctement le contenu de ma base de données dans les fenètres (2) et (3)
mais I-M-P-O-S-S-I-B-L-E d'afficher dans la fenètre (1). Pourtant, ma requète est bonne (La preuve , j'affiche en brute sur le haut (4) ce qui devrait être affiché dans le (1) )

Mais... pourquoi ça ne fonctionne pas ?

Dernière chose, j'ai remarqué qu'en supprimant le contenu du (3) #C'est à dire toutes les requêtes et la boucle d'affichage# Le (1) re-fonctionne de nouveau...... comme en témoigne l'image suivante :

Nom : Img2.png
Affichages : 452
Taille : 121,7 Ko

Nom : Img2.png
Affichages : 452
Taille : 121,7 Ko

Bref, je suis à bout, n'hésitez pas à venir m'aider

PS : Le projet n'est pas terminé, si vous trouvez des coquilles, c'est normal.

EDIT : (A l'avenir je voudrai rendre le bouton "poubelle" fonctionnel, pour qu'il permettre la suppression d'items dans la liste (1). Comment faire ?)

Le code :

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
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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
 <?php 
//////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////Le numero (4) sur l'Impr. Ecran /////////////////////////////////////////
//////////////////////////////////////////////////////////////////////////////////////////////////
$sqlVotreListe = "SELECT * FROM tbl_article_perso WHERE ar_perso_id_cli=$nocli AND ar_perso_id_nolig_devis=$nolig ORDER BY ar_perso_new_lib";
$resultVotreListe = mysql_query($sqlVotreListe);
while ($VotreListe = mysql_fetch_object($resultVotreListe)) 
{
	echo "La ligne : ".$VotreListe->ar_perso_new_lib."<br>";
}
//////////////////////////////////////////////////////////////////////////////////////////////////
?>
<div id="divItems" class="off">
	<div id="demo" class="container">
		<link rel="stylesheet" media="all" href="../../css/bootstrap.min.css">
		<div class="page-header"><h3>Gestion d'items</h3></div>
		<h4 id="demo-multiple-destinations">Votre liste d'items.</h4>
		<div class="row">
			<!--
			//////////////////////////////////////////////////////////////////////////////////////////////////
			/////////////////////////Le numero (1) sur l'Impr. Ecran /////////////////////////////////////////
			//////////////////////////////////////////////////////////////////////////////////////////////////
			-->
			<div class="col-xs-5">
				<b>Items Sélectionnés.</b>
				<select name="from[]" id="multi_d" class="form-control" size="26" multiple="multiple">
					<?php // Liste des items selectionnés
					$sqlVotreListe = "SELECT * FROM tbl_article_perso WHERE ar_perso_id_cli=$nocli AND ar_perso_id_nolig_devis=$nolig ORDER BY ar_perso_new_lib";
					$resultVotreListe = mysql_query($sqlVotreListe);
					while ($VotreListe = mysql_fetch_object($resultVotreListe)) 
					{
						print ("<option value='$VotreListe->ar_perso_id_item_reference'>$VotreListe->ar_perso_new_lib</option>\n");
					}
					?>
				</select>
			</div>
			<!--
			//////////////////////////////////////////////////////////////////////////////////////////////////
			-->
			<div class="col-xs-2" style="margin-top: 105px;">
				<button type="button" id="multi_d_leftSelected" class="btn btn-default btn-block">&lt;</button>
 
				<hr style="margin: 78px 0 32px;" />
				<button type="button" disabled id="multi_d_rightAll_2" class="btn btn-default btn-block">Poubelle</button>
				<hr style="margin: 28px 0 75px;" />
 
				<button type="button" id="multi_d_leftSelected_2" class="btn btn-default btn-block">&lt;</button>
			</div>
 
			<div class="col-xs-5">
				<!--
				//////////////////////////////////////////////////////////////////////////////////////////////////
				/////////////////////////Le numero (2) sur l'Impr. Ecran /////////////////////////////////////////
				//////////////////////////////////////////////////////////////////////////////////////////////////
				-->
				<b>Liste des packs.</b>
				<select name="to[]" id="multi_d_to" class="form-control" size="10" multiple="multiple">
					<?php // List des packs Compta et fiscal
					$sqlCptaEtFis = "SELECT * FROM tbl_article_famille WHERE fa_actif='O' AND fa_matiere=1 ORDER BY fa_lib";
					$resultCptaEtFis = mysql_query($sqlCptaEtFis);
					while ($blistCptaEtFis = mysql_fetch_object($resultCptaEtFis)) 
					{
						print ("<option value='$blistCptaEtFis->fa_id'>$blistCptaEtFis->fa_lib</option>\n");
					}
					?>
				</select>
				<!--
				//////////////////////////////////////////////////////////////////////////////////////////////////
				-->
				<br/><hr/><br/>
				<!--
				//////////////////////////////////////////////////////////////////////////////////////////////////
				/////////////////////////Le numero (3) sur l'Impr. Ecran /////////////////////////////////////////
				//////////////////////////////////////////////////////////////////////////////////////////////////
				-->
				<b>Items Dispo (&Agrave; la carte).</b>
				<select name="to_2[]" id="multi_d_to_2" class="form-control" size="10" multiple="multiple">
					<?php // List des Items dispo
					$sqlItemDispo = "SELECT * FROM tbl_article WHERE ar_actif='O' ORDER BY ar_lib";
					$resultItemDispo = mysql_query($sqlItemDispo);
					while ($blistItemDispo = mysql_fetch_object($resultItemDispo)) 
					{
						print ("<option value='$blistItemDispo->ar_id'>$blistItemDispo->ar_lib</option>\n");
					}
					?>
				</select>
 
				<!--
				//////////////////////////////////////////////////////////////////////////////////////////////////
				-->
			</div>
		</div>
	</div>
 
	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
	<script type="text/javascript" src="../../script/multiselect.min.js"></script>
	<script type="text/javascript">
	$(document).ready(function() {
		// make code pretty
		window.prettyPrint && prettyPrint();
 
		if ( window.location.hash ) {
			scrollTo(window.location.hash);
		}
 
		$('.nav').on('click', 'a', function(e) {
			scrollTo($(this).attr('href'));
		});
 
		$('#multiselect').multiselect();
 
		$('#search').multiselect({
			search: {
				left: '<input type="text" name="q" class="form-control" placeholder="Search..." />',
				right: '<input type="text" name="q" class="form-control" placeholder="Search..." />',
			}
		});
 
		$('.multiselect').multiselect();
		$('.js-multiselect').multiselect({
			right: '#js_multiselect_to_1',
			rightAll: '#js_right_All_1',
			rightSelected: '#js_right_Selected_1',
			leftSelected: '#js_left_Selected_1',
			leftAll: '#js_left_All_1'
		});
 
		$('#keepRenderingSort').multiselect({
			keepRenderingSort: true
		});
 
		$('#undo_redo').multiselect();
 
		$('#multi_d').multiselect({
			right: '#multi_d_to, #multi_d_to_2',
			rightSelected: '#multi_d_rightSelected, #multi_d_rightSelected_2',
			leftSelected: '#multi_d_leftSelected, #multi_d_leftSelected_2',
			rightAll: '#multi_d_rightAll, #multi_d_rightAll_2',
			leftAll: '#multi_d_leftAll, #multi_d_leftAll_2',
 
			search: {
				left: '<input type="text" name="q" class="form-control" placeholder="Rechercher..." />'
			},
 
			moveToRight: function(Multiselect, $options, event, silent, skipStack) {
				var button = $(event.currentTarget).attr('id');
 
				if (button == 'multi_d_rightSelected') {
					var $left_options = Multiselect.$left.find('> option:selected');
					Multiselect.$right.eq(0).append($left_options);
 
					if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) {
						Multiselect.$right.eq(0).find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$right.eq(0));
					}
				} else if (button == 'multi_d_rightAll') {
					var $left_options = Multiselect.$left.children(':visible');
					Multiselect.$right.eq(0).append($left_options);
 
					if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) {
						Multiselect.$right.eq(0).find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$right.eq(0));
					}
				} else if (button == 'multi_d_rightSelected_2') {
					var $left_options = Multiselect.$left.find('> option:selected');
					Multiselect.$right.eq(1).append($left_options);
 
					if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) {
						Multiselect.$right.eq(1).find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$right.eq(1));
					}
				} else if (button == 'multi_d_rightAll_2') {
					var $left_options = Multiselect.$left.children(':visible');
					Multiselect.$right.eq(1).append($left_options);
 
					if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) {
						Multiselect.$right.eq(1).eq(1).find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$right.eq(1));
					}
				}
			},
 
			moveToLeft: function(Multiselect, $options, event, silent, skipStack) {
				var button = $(event.currentTarget).attr('id');
 
				if (button == 'multi_d_leftSelected') {
					var $right_options = Multiselect.$right.eq(0).find('> option:selected');
					Multiselect.$left.append($right_options);
 
					if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) {
						Multiselect.$left.find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$left);
					}
				} else if (button == 'multi_d_leftAll') {
					var $right_options = Multiselect.$right.eq(0).children(':visible');
					Multiselect.$left.append($right_options);
 
					if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) {
						Multiselect.$left.find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$left);
					}
				} else if (button == 'multi_d_leftSelected_2') {
					var $right_options = Multiselect.$right.eq(1).find('> option:selected');
					Multiselect.$left.append($right_options);
 
					if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) {
						Multiselect.$left.find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$left);
					}
				} else if (button == 'multi_d_leftAll_2') {
					var $right_options = Multiselect.$right.eq(1).children(':visible');
					Multiselect.$left.append($right_options);
 
					if ( typeof Multiselect.callbacks.sort == 'function' && !silent ) {
						Multiselect.$left.find('> option').sort(Multiselect.callbacks.sort).appendTo(Multiselect.$left);
					}
				}
			}
		});
 
		$("#optgroup").multiselect();
	});
 
	function scrollTo( id ) {
		if ( $(id).length ) {
			$('html,body').animate({scrollTop: $(id).offset().top - 60},'slow');
		}
	}
	</script>
</div>

Merci d'avance !

**NoSmoking** · 06/09/2016, 14h50

Bonjour,

(La preuve , j'affiche en brute sur le haut (4) ce qui devrait être affiché dans le (1)

du mal à tout comprendre entre tes explications et ton image, mais pour moi tu as un problème coté serveur( PHP) pour constituer/remplir ta page, rien à voir avec javascript.

Nota : si tu veux t'en sortir ne traite qu'un sujet en même temps.

Je déplace vers le forum PHP

Invité · 06/09/2016, 15h11

Bonjour,

Peut-on voir le code source (sans PHP) dans les 2 cas ?

Je soupçonne plutôt un souci d'id redondant.

**Celira** · 06/09/2016, 15h24

Hum... je sens bien un conflit entre les données et le composant JS, du genre "l'élément est à la fois à droite et à gauche donc on l'affiche uniquement d'un côté"

J'aurais donc tendance à filtrer les requêtes qui alimentent les listes à droite pour exclure les éléments qui sont déjà sélectionnés dans la liste de gauche. Quelque chose du genre :

Code sql :

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

1
2
3
4
SELECT * FROM tbl_article 
WHERE ar_actif='O' 
and ar_id not in (SELECT ar_perso_id_item_reference FROM tbl_article_perso WHERE ar_perso_id_cli=$nocli AND ar_perso_id_nolig_devis=$nolig) 
ORDER BY ar_lib

(noms des colonnes et des tables non garantis à vérifier et modifier)

Au passage, l'API mysql est obsolète depuis PHP 5.5 et supprimée en PHP 7. Il serait donc judicieux de passer à PDO (ou mysqli)

**SpaceFrog** · 07/09/2016, 11h15

Au lieu d'utiliser des plugins complexes, rien de vaut une dizaine de lignes de jquery pour basculer les options d'un select à l'autre.

**Aroen** · 08/09/2016, 09h44

Bonjour tout le monde !

Tout d'abord je tenais à vous remercier pour votre aide

Et désolé de ne pas vous avoir fait parvenir le code HTML généré (Je n'y avais pas pensé

... Mais c'est vrai que ça aurait été pratique

)

Envoyé par Celira

Hum... je sens bien un conflit entre les données et le composant JS, du genre "l'élément est à la fois à droite et à gauche donc on l'affiche uniquement d'un côté"

Bien vu! C'était ça le problème. Un petit désaccord entre le JS et mes éléments en doublons (Et grâce à de bons conseils, j'ai rectifié le tir en changeant complètement le plugin multiselect) #Merci SpaceFrog#

Le programme est en bonne voie, j'ai encore un peu du travail dessus, mais voici le code si cela intéresse des personnes dans les années (siècles?

) à venir

JsFiddle : https://jsfiddle.net/v0wbhmgL

Je met en

!

(Même s'il me reste quelques ajouts à faire dessus

)