Bug doublon à la suppression [Résolu]

[n3x1n²]

Bonjour,

Le contexte;
j'ai un select à gauche et je fais passer les option à droite avec un bouton.


Lorsque je fais passer un groupe d’élément (plusieurs option en même temps) et que je supprime un par un les éléments avec leur bouton delete, les éléments se remettent à gauche comme prévu.

Mais le problème apparaît lors de la suppression du block qui est vide :

Il se supprime mais il refait passer en même temps les éléments qu’il contenait, ce qui crée des doublons dans la liste gauche.


Là où je supprime les éléments :

Code :

1
2
3
4
5
6
7
8
9
10
 
 
			$('#delBlock'+idLeftItem).bind("click", function(){
 
				var generateLeft_3 = '<option value="'+monID+'">'+monLabel+'</option>';
 
				$('#leftList').append(generateLeft_3);
 
				$('div#'+idLeftItem).remove();
			});

D'après vous si je mets une condition comme "si le block est vide alors div.remove sinon faire ce qui est au-dessus ?

Ou que le block se supprime lui même lorsqu'il ne contient plus rien ?

Si oui, comment vérifier en jQuery qu'un block n'est pas vide ou plein ?



Merci d'avance !

[danielhagnoul]

Bonsoir

Sans le code complet (HTML, CSS, JS) il m'est impossible de tester votre problème.

[n3x1n²]

Les voici :

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
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
 
 
 
function initButton(){
	/*
	 * Role : disable button
	 */
 
	$('#add').attr('disabled','disabled');
}
 
function initList(){
	/*
	 * Role : initialize the list
	 */
 
	var initValue='';
	$('#leftList').val('initValue');
}
 
function activateButton(){
	/*
	 * Role : enable button
	 */
 
	$('#add').removeAttr('disabled');
}
 
function removeItem($object){
	/*
	 * Role : remove an item
	 */
	$object.remove();
}
 
 
 
 
function addPackage() {	
 
	//the selected item of leftList
	var $leftItem = $('#leftList option:selected');
 
	//id of the left item
	var idLeftItem = $leftItem.val();
 
	//toString of the object left item
	var textLeftItem = $leftItem.text();
 
	//number of options selected
	var nbLeftItem = $leftItem.size();
 
 
	var itemCollection = new Array();
 
 
 
 
 
	//if leftItem has an id
	if(idLeftItem){
 
 
		//START TABLE
		var div = '<div id="'+idLeftItem+'">';
		var table = '<table id="table'+idLeftItem+'">';
		var tr = '<tr id="block'+idLeftItem+'"><th style="background:#eee;"></th><th id="all'+idLeftItem+'" style="background:#eee;"><input type="button" value="X" id="delBlock'+idLeftItem+'" style="float:right;"/></th></tr>';
 
 
		var startTABLE = div+table+tr;
 
		$('#rightList').append(startTABLE);
 
 
 
		//store each item selected in the collection
		$leftItem.each(function(){
 
			var id = $(this).val();
			var label = $(this).text();				
 
			var item = { "id" : id, "label" : label };		
 
			//add item in itemCollection
			itemCollection.push(item);		
 
			var monID = itemCollection[itemCollection.length - 1].id;
			var monLabel = itemCollection[itemCollection.length - 1].label;
 
 
 
			//append ITEM in <tr>
			$('#table'+idLeftItem).append('<tr id="item'+monID+'"><th id="item'+monID+'" style="text-align:left; width:80%;">'+monLabel+'</th><th style="width:20%; text-align:right;"><input type="button" value="X" id="del'+monID+'"/></th></tr>');			
 
 
 
			//Remove AN ITEM in a block
			$('#del'+monID).bind("click", function(){
 
					//add to the left list
					var generateLeft_2 = '<option value="'+monID+'">'+monLabel+'</option>' ;
 
					$('#leftList').append(generateLeft_2);
 
					//remove from the right list
					$('tr#'+'item'+monID).remove();
				});
 
 
 
 
 
			//Delete A BLOCK
			$('#delBlock'+idLeftItem).bind("click", function(){
 
				var generateLeft_3 = '<option value="'+monID+'">'+monLabel+'</option>'; 
 
					$('#leftList').append(generateLeft_3);				
 
					$('div#'+idLeftItem).remove();	
 
			});
 
 
 
 
		}); //end each
 
 
		//END TABLE
		var os = '<tr id="os'+idLeftItem+'"><th colspan="2"><span style="font-size:18px;">OS :</span> <span style="font-weight:lighter;">Win<input type="checkbox" id="checkWin" checked="checked"/> Lin<input type="checkbox" id="checkLin"/> Mac<input type="checkbox" id="checkMac"/> And<input type="checkbox" id="checkWin"/> iOS<input type="checkbox" id="checkIOS"/></span></th></tr>';
		var endTable =os+'</table></div>';
 
 
		$('#table'+idLeftItem).append(endTable);
 
 
	}	//end_if(has an id)
 
 
 
 
	removeItem($leftItem);
 
	initButton();
 
 
} //end addPackage
 
 
 
 
$(document).ready(function(){   
 
	initButton();
	initList();
 
	//when you click on the leftList
	$('#leftList').click(function(){
 
		activateButton();					
 
		//click on the add button which adds a package
		$('#add').click(addPackage);
 
 
 
		//Disable the add button for each value change				 
		$('#leftList').change(function() {
			initButton();
		});	
 
	});//end #leftList.click
 
 
});//end ready function

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>CopyList</title>
<link href="mystyle.css" type="text/css" rel="stylesheet" media="screen"/>
 
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" /></script>
 
<script type="text/javascript" src="js.js"></script>
 
 
</head>
<body>
 
 
	<div id="global">
 
 
 
		<div id="left">
			<select multiple id="leftList" size="10">
 
						<option value="1">
							Aazdazdazd
						</option>
 
						<option value="2">
							Bazdazdazd
						</option>
 
						<option value="3">
							Cazdazdazd
						</option>
 
						<option value="4">
							Dazdazdazd
						</option>
 
						<option value="5">
							Eazdazdazd
						</option>
 
						<option value="6">
							Fazdazdazd
						</option>
 
						<option value="7">
							Gazdazdazd
						</option>
 
						<option value="8">
							Hazdazdazd
						</option>
 
						<option value="9">
							Iazdazdazd
						</option>
 
						<option value="10">
							Jazdazdazd
						</option>
 
 
 
			</select>
		</div>
 
 
 
		<div id="right">
 
			<table id="rightList" border="0" cellspacing="0">
 
			</table>
 
		</div>
 
 
 
		<div id="middle">	
			<input type="button" id="add" value="Add >>" />	
		</div>
 
	</div>
 
 
 
</body>
</html>

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
 
@CHARSET "ISO-8859-1";
 
#global{
	margin:auto;
	height:500px;
	width:580px;
/*	border:2px solid black;*/ 
}
 
 
#left{
	float:left;
	width:100px;
	height:400px;
/* 	border:2px solid red;  */
}
 
#left select{
	float:right;
}
 
 
#middle{
	margin:auto 405px auto auto;
	width:70px;
	height:30px;
/* 	border:2px solid blue; */
}
 
 
#right{
	float:right;
	width:400px;
	height:400px;
/* 	border:2px solid green; */
}
 
#ajout input{
	margin-left:-40px;
}

J'ai une autre solution que j'ai du mal à mettre en place :
au moment de la suppression, on regarde si l'id d'item de droite existe déjà à gauche. Si c'est le cas, on fait pas passer, on supprime juste...

[danielhagnoul]

Bonsoir

Je n'ai pas pu me servir de vos codes, trop de choses bizarres.

En vrac (j'en oublie sûrement) :

• Des gestionnaires d'événement incorporés dans des fonctions, donc crées à chaque appel de la fonction, certains même dans une boucle each ! Donc créer n fois à chaque appel de fonction.
  
• Une table qui contient une division ! Cette division contient une table construite uniquement à base de th, sans thead et sans tbody.
  
• Une gestion des boutons inutilement complexe.

Voici un exemple de deux sélections, avec transfert des options sélectionnées de l'une vers l'autre. Avec gestion des boutons et réinitialisation de l'ensemble lors du rechargement de la page.

Cet exemple utilise la dernière version de jQuery, 1.6, et montre un exemple d'utilisation de la méthode prop().

La page utilise les techniques d'aujourd'hui et fonctionne sous C11, F4.1 et IE9. (Je ne travaille plus pour les navigateurs obsolètes, je vous laisse le soin de l'adaptation. Cela n'influence pas le code jQuery 1.6).

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
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<style>
		/* Base */
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {margin:0px; padding:0px; }
		body {background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 {font-family:serif; padding:6px; }
		p, div, td {word-wrap:break-word; }
		pre, code {white-space:pre-wrap; word-wrap:break-word; }
		img, input, textarea, select {max-width:100%; }
        img {border:none; }
		h1 {font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p {padding:6px; }
        ul,ol,dl {list-style:none; padding-left:6px; padding-top:6px; }
        li {padding-bottom:6px; }
		label {display:block; }
		input {width:250px; }
		input[type="button"] {width:auto; }
		input[required] {border-right:3px solid orange; }
		td {padding:3px; }
		.conteneur {width:95%; min-width:800px; min-height:400px; margin:12px auto; background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
 
		/* article */
		.conteneur {border-collapse:separate; border-spacing:6px; }
		.row {display:table-row; }
		article {display:table-cell; border:1px dotted grey; text-align:center; vertical-align:middle; }
		article:nth-of-type(1) {width:200px; height:200px; }
		article:nth-of-type(2) {width:200px; height:200px; }
 
		/* -- */
		select {min-width:150px; }
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
		<section class="row">
			<article>
				<select id="leftList" multiple size="10">
					<option value="1">Aazdazdazd</option>
					<option value="2">Bazdazdazd</option>
					<option value="3">Cazdazdazd</option>
					<option value="4">Dazdazdazd</option>
					<option value="5">Eazdazdazd</option>
					<option value="6">Fazdazdazd</option>
					<option value="7">Gazdazdazd</option>
					<option value="8">Hazdazdazd</option>
					<option value="9">Iazdazdazd</option>
					<option value="10">Jazdazdazd</option>
				</select>
			</article>
			<article>
				<select id="rightList" multiple size="10"></select>
			</article>
		</section>
		<section class="row">
			<article>
				<button id="btnAdd" disabled>Passe la sélection gauche à droite</button>
			</article>
			<article>
				<button id="btnRemove" disabled>Passe la sélection droite à gauche</button>
			</article>
		</section>
	</section>
	<footer itemscope itemtype="http://data-vocabulary.org/Person">
		<!-- Date ISO format long US : aaaa-mm-qqThh:mm:ss.nnn+hh:mm -->
		<time datetime="2011-05-06T21:55:00.000+02:00" pubdate>2011-05-06</time> <span itemprop="name">Daniel Hagnoul</span> <a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
	</footer>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.6.min.js"></script>
	<script>
		$(function(){
			/*
			 * Pour réinitialiser au rechargement de la page
			 */
			$("#leftList").children("option").prop({selected: false});
			$("#rightList").children("option").prop({selected: false});
			$("#btnAdd").prop({disabled: true});
			$("#btnRemove").prop({disabled: true});
 
			$("#leftList").change(function(){
				$("#btnAdd").prop({disabled: false});
			});
 
			$("#rightList").change(function(){
				$("#btnRemove").prop({disabled: false});
			});
 
			$("#btnAdd").click(function(){
				$("#leftList option:selected").each(function(i, item){
					$("#rightList").append(item);
				});
 
				$("#rightList").children("option").prop({selected: false});
				$("#btnAdd").prop({disabled: true});
			});
 
			$("#btnRemove").click(function(){
				$("#rightList option:selected").each(function(i, item){
					$("#leftList").append(item);
				});
 
				$("#leftList").children("option").prop({selected: false});
				$("#btnRemove").prop({disabled: true});
			});
		});
	</script>
</body>  
</html>

[n3x1n²]

Bonjour,

Merci de vos remarques. Effectivement le code html n'était propre alors j'y ai jeté un coup d’œil.

Sinon la démonstration donc est à l'adresse http://benimstock.free.fr/ et vous pouvez retrouver les fichiers sur http://benimstock.free.fr/n3x1n.rar .

Ainsi vous verrez qu'à la différence du votre, le mien ne doit pas avoir de select à droite à cause de certaines contraintes prédéfinies.


Donc je vous rappelle le problème :

Lorsque je fais passer un groupe d’élémentset que je supprime un par un les éléments avec leur bouton delete, les éléments se remettent à gauche comme prévu et le block est vide.

Mais le problème apparaît lors de la suppression du block qui est vide :

Il se supprime mais il refait passer les éléments qu’on venait de supprimer, ce qui crée des doublons dans la liste gauche.


Merci d'avance pour votre aide.

[n3x1n²]

J'ai résolu mon problème.

Mais toute fois je suis ouvert à toutes critiques et conseils pour améliorer mon code jQuery.

Merci