IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Bug doublon à la suppression


Sujet :

jQuery

  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Octobre 2007
    Messages
    56
    Détails du profil
    Informations personnelles :
    Âge : 36
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations forums :
    Inscription : Octobre 2007
    Messages : 56
    Par défaut Bug doublon à la suppression
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 !

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    Bonsoir

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

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  3. #3
    Membre averti
    Profil pro
    Inscrit en
    Octobre 2007
    Messages
    56
    Détails du profil
    Informations personnelles :
    Âge : 36
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations forums :
    Inscription : Octobre 2007
    Messages : 56
    Par défaut
    Les voici :

    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
    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 : 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
     
    <!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 : 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
     
    @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...

  4. #4
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    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 : 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
    <!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>

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  5. #5
    Membre averti
    Profil pro
    Inscrit en
    Octobre 2007
    Messages
    56
    Détails du profil
    Informations personnelles :
    Âge : 36
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations forums :
    Inscription : Octobre 2007
    Messages : 56
    Par défaut
    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.

  6. #6
    Membre averti
    Profil pro
    Inscrit en
    Octobre 2007
    Messages
    56
    Détails du profil
    Informations personnelles :
    Âge : 36
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations forums :
    Inscription : Octobre 2007
    Messages : 56
    Par défaut
    J'ai résolu mon problème.

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

    Merci

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [XL-2010] "Excel a cessé de fonctionner" suite à un bug lors de suppression de lignes
    Par Dushka dans le forum Macros et VBA Excel
    Réponses: 5
    Dernier message: 18/02/2014, 09h00
  2. [XL-2010] Doublons avec suppression de la ligne qui contient la valeur négatif
    Par medsky74 dans le forum Macros et VBA Excel
    Réponses: 15
    Dernier message: 04/02/2013, 14h27
  3. [AC-2010] Filtrer les doublons sans suppression
    Par Goose- dans le forum Requêtes et SQL.
    Réponses: 4
    Dernier message: 07/11/2012, 22h23
  4. recherche doublons et suppression
    Par huître dans le forum Macros et VBA Excel
    Réponses: 8
    Dernier message: 27/06/2011, 10h02
  5. [LG]Suppression de doublons
    Par moustique31 dans le forum Langage
    Réponses: 5
    Dernier message: 20/12/2003, 21h03

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo