Partage

"Copier" un élément

mettre sur la bonne voie

Sujet résolu

18 avril 2011 à 21:06:27

Bonjour,

Il faut que je fasse un truc comme suit :

Imaginez 3 blocks cote à cote :

A gauche, j'ai une liste d'éléments chargés à partir de la base données.
Au milieu, un bouton qui s'appelle "Add >>".
A droite, un block vide, qui va recevoir les éléments sélectioné et ajouté avec le click sur "Add >>".

N'étant pas un spécialiste de javascript ou de jQuery, j'ai du mal à concevoir l'algorithme. Mais j'ai des notions mine de rien de ces deux langages (jQuery très vite fait).

Pouvez-vous m'orientez dans la bonne voie, me donner des pistes s'il vous plait?

Mes préconditions :
->Si aucun élément est sélectionné, alors le bouton est grisé (on ne peut pas cliquer dessus)
->Si l'élément sélectionné existe déjà à droite, le bouton est grisé.

Pour que vous visualisiez, j'ai codé très vite fait ceci :

<!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"/>
</head>
<body>

	<div id="global">
		
		<?php
			//connexion
			$connex= new PDO('mysql:host=localhost;dbname=mabase','root','');	
		?>
		
		
		<div id="listeGauche">
			<select multiple>
				<?php
				
					$maReq=$connex->query('SELECT * FROM liste');
					
					while($donnees=$maReq->fetch()){?>
						<option>
							<?php echo $donnees['nom'];?>
						</option>
					
					<?php 
					}//fin while
					
					$maReq->closeCursor();
				?>
			
			</select>
		</div>



		<div id="listeDroite"></div>
		
		
		
		<div id="add">	
			<input type="submit" value="Add >>" name="add" />	
		</div>
	
	</div>
</body>
</html>

@CHARSET "ISO-8859-1";

#global{
	margin:auto;
	height:500px;
	width:580px;
/* 	border:2px solid black; */
}


#listeGauche{
	float:left;
	width:70px;
	height:400px;
/* 	border:2px solid red; */
}


#add{
	margin:auto 435px auto auto;
	width:70px;
	height:400px;
/* 	border:2px solid blue; */
}


#listeDroite{
	float:right;
	width:430px;
	height:400px;
	border:2px solid green;
}

Golmote

19 avril 2011 à 0:41:42

Bah... lorsqu'un élément d'une liste est cliqué, tu regardes s'il faut activer/désactiver le bouton, et je suppose qu'il faudrait que tu stockes les éléments sélectionnés dans un Array. (Un Array par liste, donc).

Lors du clic sur le bouton, tu récupères tous les éléments sélectionnés (via l'Array) et tu les append dans l'autre liste (cf DOM). Puis tu vides l'Array, je suppose.

Desolation

19 avril 2011 à 8:59:00

Un code qui peut te servir de base de travail :

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" /></script>
<script type="text/javascript">
$(document).ready(function(){     
	$('#ajouter').click(function() {
		var $liste1 = $('#liste1 option:selected');
		$('#liste2').append('<option value="'+$liste1.val()+'">'+$liste1.text()+'</option>');
		$liste1.remove();
	});
	
	$('#supprimer').click(function() {
		var $liste2 = $('#liste2 option:selected');
		$('#liste1').append('<option value="'+$liste2.val()+'">'+$liste2.text()+'</option>');
		$liste2.remove();
	});
});
</script>
<select name="liste1" id="liste1" size="5">
	<option value="1">Banane</option>
	<option value="2">Fraise</option>
	<option value="3">Framboise</option>
</select>

<input type="button" id="ajouter" value=">> Ajouter" />
<input type="button" id="supprimer" value="Supprimer <<" />

<select name="liste2" id="liste2" size="5">
</select>

Manque le CSS.

http://chez-syl.fr/

nexin

19 avril 2011 à 12:06:06

Merci Golmote et Desolation.

@Desolation :
J'avais commencé à faire quelque chose qui ressemble à ton code. Mais effectivement ça m'a beaucoup simplifié la vie.

Donc pour ce qui est d'ajout d'élément, c'est bon.

Quant à griser un bouton, ça devient intéressant :
En appliquant la méthode .attr() sur le input, je le désactive.

$('input').attr('disabled','disabled');

Mais le problème c'est que, j'arrête pas de chercher, ce bout de code s'appliquera sur tous les input. Alors que je veux désactiver UN seul input bien spécifique (selon id).
J'ai essayé plein de truc comme :

$('input:contains('Add >>')').attr('disabled','disabled');
$('#add').attr('disabled','disabled');

Je crois que dans le cas où on utilise l'id, c'est pas la methode .attr() qu'il faut utiliser... Mais dans ce cas, comment trouver la bonne méthode... ?

Desolation

19 avril 2011 à 12:13:31

.attr('disabled', true);

http://chez-syl.fr/

nexin

19 avril 2011 à 12:50:43

nop,
Cela ne fonctionne pas :
$('#add').attr('disabled', true);

Et enfin j'ai trouvé ce qu'il faut faire, c'est :

$('#add input').attr('disabled','disabled');

Maintenant une question :

Voyez-vous une erreur dans ce bout de code que j'ai fait ?

function initButton(){
/*
 * Role : désactiver le bouton "add"
 */
	
	
var isElementSelected = $('#listeGauche option:selected').length >1;
		
var notSelected = $('#listeGauche option:selected').length = 0;
	
if(notSelected && isElementSelected){
	$('#add input').attr('disabled','disabled');
}
	
}

Desolation

19 avril 2011 à 14:58:36

Le code entier, HTML + JS stp.

http://chez-syl.fr/

nexin

19 avril 2011 à 15:04:33

Voilà l'état actuel du code :

<!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">
		
		<?php
			//connexion
			$connex= new PDO('mysql:host=localhost;dbname=mabase','root','');	
		?>
		
		
		<div id="Gauche">
			<select multiple id="listeGauche">
				<?php
				
					$maReq=$connex->query('SELECT * FROM liste');
					
					while($donnees=$maReq->fetch()){
				?>
						<option id="eltGauche" value="<?php $donnees['id']; ?>">
							<?php echo $donnees['nom'];?>
						</option>
					
				<?php 
					}//fin while
					
					$maReq->closeCursor();
				?>
			
			</select>
		</div>



		<div id="Droite">
		
			<table id="listeDroite">
							
			</table>
		
		</div>
		
		
		
		<div id="add">	
			<input type="submit" value="Add >>" id="add" />	
		</div>
	
	</div>
	
	
	
</body>
</html>

function initButton(){
/*
 * Role : désactiver le bouton "add"
 */

/*ce que je veux faire là-dedans, c'est 
-> si aucun élt est sélectionné alors griser le bouton
-> si le nb d'elt > 1 alors griser le bouton
*/
	
	
	var isElementSelected = $('#listeGauche option:selected').length >0;
	$('#add input').attr('disabled',isElementSelected?'':'disabled');
	
	
	var notSelected = $('#listeGauche option:selected').length = 0;
	$('#add input').attr('disabled',notSelected?'':'disabled');
	
	/*
	if(notSelected && isElementSelected){
		$('#add input').attr('disabled','disabled');
	} 
	 */
	
	//$('#add input').attr('disabled','disabled');
	
}



$(function(){     

	initButton();

	$('#eltGauche').click(function(){
			//au moment du click sur le bouton ayant l'id "add"
			$('#add').click(function() {
	
				//Je stocke le texte de la balise option séléctionné (l'élément séléctionné) 
				//(option:selected ne fonctionne que pour les balises <select> )
				var $elementDeListeGauche = $('#listeGauche option:selected');
	
				//avec la methode append, je rajoute à la ma table ayant l'id "listeDroite" les éléments ajouté 
				//la methode text(), on peut dire que c'est l'équivalent de la methode "toString()" en Java.
				//elle permet de transformer en chaîne de caractère l'objet $maVariable.
				$('#listeDroite').append('<tr><td>'+$elementDeListeGauche.text()+'</td></tr>');
	
				//et enfin je supprime l'élément ajouté de la liste gauche 
				$elementDeListeGauche.remove();

		
				initButton();
				
			});
	});

		/*
		 * $('#listeGauche').change(initButton);
		 * initButton();
		*/ 
});

Desolation

19 avril 2011 à 15:43:18

Ligne 30 de ton HTML, tu dois pas mettre un id dans une boucle ! Un id doit être unique !

http://chez-syl.fr/

nexin

19 avril 2011 à 15:57:49

Oui alors mis à jour du .js :

$('#eltGauche').click(function(){
...
}

L'id de l'<option> "eltGauche" me facilitait pas la vie. J'ai remarqué que pour activer le bouton il fallait cliquer sur le PREMIER élément d'abord. Sinon ça marchait pas.
Du coup je l'ai remplacé par l'id de la <select>. Ce qui fait que quand je clique sur n'importe quel élément, ça active le bouton:

$('#listeGauche').click(function(){
...
}

@Desolation : Finalement je n'ai plus de eltGauche dans mon js

Nouveau .js :

function initButton(){
			$('#add input').attr('disabled','disabled');
	}

	function activeButton(){
		$('#add input').removeAttr('disabled');
	}


	$(function(){     

	
		initButton();


		$('#listeGauche').click(function(){

			activeButton();
				
				//au moment du click sur le bouton ayant l'id "add"
				$('#add').click(function() {
		
					//Je stocke le texte de la balise option séléctionné (l'élément séléctionné) 
					//(!! option:selected ne fonctionne que pour les balises <select> !!)
					var $elementDeListeGauche = $('#listeGauche option:selected');
		
					//avec la methode append, je rajoute à la ma table ayant l'id "listeDroite" les éléments ajouté 
					//la methode text(), on peut dire que c'est l'équivalent de la methode "toString()" en Java.
					//elle permet de transformer en chaîne de caractère l'objet $maVariable.
					$('#listeDroite').append('<tr><td>'+$elementDeListeGauche.text()+'</td></tr>');
		
					//et enfin je supprime l'élément ajouté de la liste gauche 
					$elementDeListeGauche.remove();
					
				});//fin click sur add
				
		});//fin click sur select
		
	});// fin jQuery

Pour vous rappeler sur quoi je travaille en ce moment :

Je cherche à modifier la fonction initButton() de façon à ce que le bouton soit grisé si aucun élément n'est sélectionné et si plus d'un élément est sélectionné.

Si vous essayez de faire ceci dans initButton(), je vous préviens, ça ne marche pas...

var selected   = $('#listeGauche option:selected').length=0;
		var selectedPls= $('#listeGauche option:selected').length>1;

		if(selected && selectedPls){
			$('#add input').attr('disabled','disabled');
		}

Desolation

19 avril 2011 à 16:13:42

Si tu veux bien j'utilise mon exemple qui est simple, tu adapteras :

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" /></script>
<script type="text/javascript">
$(document).ready(function(){
	
	var $ajouter = $('#ajouter');
	var $supprimer = $('#supprimer');
	
	$('#liste1').val('');
	
	$ajouter.attr('disabled', true);
	$supprimer.attr('disabled', true);
	
	$('#liste1').change(function() {
		$ajouter.attr('disabled', false);
	});
	
	$('#liste2').change(function() {
		$supprimer.attr('disabled', false);
	});
	
	$('#ajouter').click(function() {
		var $liste1 = $('#liste1 option:selected');
		$('#liste2').append('<option value="'+$liste1.val()+'">'+$liste1.text()+'</option>');
		$liste1.remove();
		
		$ajouter.attr('disabled', true);
	});
	
	$('#supprimer').click(function() {
		var $liste2 = $('#liste2 option:selected');
		$('#liste1').append('<option value="'+$liste2.val()+'">'+$liste2.text()+'</option>');
		$liste2.remove();
		
		$supprimer.attr('disabled', true);
	});
});
</script>
<select name="liste1" id="liste1" size="5">
	<option value="1">Banane</option>
	<option value="2">Fraise</option>
	<option value="3">Framboise</option>
</select>

<input type="button" id="ajouter" value=">> Ajouter" />
<input type="button" id="supprimer" value="Supprimer <<" />

<select name="liste2" id="liste2" size="5">
</select>

http://chez-syl.fr/

nexin

19 avril 2011 à 16:35:26

Merci, c'est gentil.

Mais sinon justement je suis dessus depuis ce midi sur la méthode .change() ... Je vois pas trop à quoi ça sert, dans quel cas on l'utilise...
En l'occurence, ici, c'est pas très claire..

Donc tu pourrais m'expliquer ces lignes s'il te plait ?

$('#liste1').change(function() {
	$ajouter.attr('disabled', false);
});

Desolation

19 avril 2011 à 16:57:56

Cet événement est déclenché lorsque la valeur d'un champ ou d'une liste change. C'est ce qu'il faut utiliser pour les listes déroulantes, .change() est exécuté à chaque fois que tu sélectionnes une nouvelle valeur dans la liste.

http://chez-syl.fr/