11402 sujets

JavaScript, DOM et API Web HTML5

Pages :
Bonjour a tous !!

En ce moment je bosse sur un espace de partage, sur lequel des administrateurs de groupe doivent pouvoir ajouter des personnes, mais voila ajouter une personne par une c'est rébarbatif...

Tout le monde connait le grand Facebook !!!

Et donc je voudrais copier, du moins m'en inspirer fortement, de son affichage au niveau des invitations, c'est à dire, on voit une liste de personnes(moi ce serait tous les utilisateurs du site, vous inquiétez pas c'est de l'intranet y'a pas 10.000 users =) ), donc une liste de personnes dont je pourrais sélectionnés en cliquant dessus, et qui serait ajouté directement dans mon groupe.(c'est à dire on ajoute la personne à une liste temporaire, qui nous permettrais de contrôler et de valider la totalité)

et moi j'ai supposé que cela est généré en Ajax ou JQuery Smiley smile

des idées pour m’éclairer ?? (Sachant que je n'ai jamais fait de JQuery et très peu d'Ajax)
Je voudrais surtout savoir s'il existe un tuto qui se rapprocherait de mon idée Smiley smile

merci à tous !!

Nouvelle fonction : je l'explique à la fin mais mieux vaut se répéter que pas assez Smiley cligne
Donc voila la solution apporté par Su4p marche très bien ! Mais maintenant je voudrais ajouté une autre fonction ajouter, qui ajoute toutes la liste de gauche !
J'ai commencé à tester quelque chose sur le dernier post.
Merci encore !

Solution écrit par Su4p :
Le formulaire :
<FORM name="formulaire" action="var.php" method="post">
				<input type="hidden" name="utilisateursChoisis" id="utilisateursChoisis"/> 
				<?php echo'<input type="hidden" name="groupe" value="'.$groupe.'"/>'; ?>
					<TABLE><TR>
					<TD align="center"><B><FONT size="2">Liste des utilisateurs : </FONT></B><BR>
					<select align=top name="liste1" size=6  style="width:120px">  
                    <option value="user1">user1</option>  
                    <option value="user2">user2</option>  
                    <option value="user3">user3</option>  
                    <option value="user4">user4</option>  
                </select> 

					</TD>
					<TD align="center">
					<INPUT type="button" value="Ajouter >>>" onClick="Deplacer(this.form.liste1,this.form.liste2)">
					<BR><BR>
					<INPUT type="button" value="&lt;&lt;&lt; Enlever" onClick="Deplacer(this.form.liste2,this.form.liste1)">
					</TD>
					<TD align="center"><FONT size="2"><B>Utilisateurs à ajouter</B></FONT><BR>
					<SELECT align=top name="liste2" id="liste2" size=6 style="width:120px">
						<OPTION value="10">----------------------</OPTION>
					</SELECT>
					</TD>
					</TR></TABLE>
					<SCRIPT language="javascript">
						// Astuce pour Netscape qui ne supporte pas style="width:100"
						// Donc : création d'une ligne pour initialiser la largeur puis suppression par ce javascript
						document.formulaire.liste2.options.length=0;
					</SCRIPT>
					
					<input type="submit" value="Valider" onclick="checkform()"/> 
				</FORM>


Le JS :
// on a donc Deplacer 
		 function Deplacer(l1,l2) {    
                    if (l1.options.selectedIndex>=0) {    
                        o=new Option(l1.options[l1.options.selectedIndex].text,l1.options[l1.options.selectedIndex].value);    
                        l2.options[l2.options.length]=o;    
                        l1.options[l1.options.selectedIndex]=null;    
                    }else{    
                        alert("Aucun utilisateur a été sélectionné");    
                    }    
                }    
        //et check form   
        function checkform(){   
            // le but de check form est de parcourir tous les elements    
            // de la liste de choix d'en extraire les valeurs et de les mettres dans un input   
            // on va les séparer ici dans cet exemple par des |   
            $("#liste2 option").each(function(){   
                    $('#utilisateursChoisis').val($(this).val()+'|'+$('#utilisateursChoisis').val());    
                });    
            $('#utilisateursChoisis').val($('#utilisateursChoisis').val().slice(0, -1));    
            return true;   
        }   




$tab=explode('|',$_POST['utilisateursChoisis']); 
        foreach($tab as $idUser) 
        { 
                        // A la place du echo tu mettras ton traitement. 
            echo 'util : '.$idUser; 
        } 
	


edit ! Solution encore apporté par Su4p ! (un grand merci à lui !!!) :
function Tous(l1,l2){   
            var i =0;  
            //pas fan de ta boucle while puisque on sait quand ça va se finir grace à .length  
            for(i=0 ; i < l1.length ; i++ ){   
                //si tu lui précises pas qu'elle option il doit créer il risque de pas comprendre  
                // donc là on lui dit qu'on veut la i niéme   
                o=new Option(l1.options[i].text,l1.options[i].value);   
                //voila maintenant on la rajoute dans la liste 2 à la derniere position de la liste 2  
                l2.options[l2.options.length]=o;       
                //pour finir on retire l'option qui se trouve dans la liste 1 à la i niéme position  
                
            }   
            l1.length=0; 
 
        } 
[/i][/i]
Modifié par mini-truc (03 May 2011 - 16:53)
N'ayant aucune solution proposée Smiley smile
je poste la mienne : pour un début

-un bon vieux formulaire en HTML
-un élément(bouton radio, case à cocher ou autre) avec onClick()
-une fonction qui ajoute à un array

et le tour est presque joué !

Maintenant il faut réfléchir pour auto charger, lorsque je met un nom dans la liste il la retire de la liste des personnes non ajoutés.

En rédigeant ce post, j'ai pensé qu'il était également possible de faire cela par un Drag&Drop, mais cette solution n'est pas très ergonomique pour les utilisateurs "bato"
Génial !! Je te remercie beaucoup !!

Je suppose que par la suite j'automatise la liste de gauche en bouclant ma table d'utilisateur
et pour valider ma liste, comment puis je récupéré le contenu de la liste de droite??
Comme je le pensais, je ne récupère pas ma liste complète à droite si je me sers du formulaire(post ou get) je vais récupérer uniquement l'utilisateur sélectionné dans la liste droite, si je ne sélectionne rien, bien sur c'est comme un champ vide.

Une idée ?? Comment puis je récupérer le contenu de ma liste gauche ??


<FORM name="formulaire" action="var.php" method="get">
					<TABLE><TR>
					<TD align="center"><B><FONT size="2">Activités proposées</FONT></B><BR>
					<SELECT align=top name="liste1" size=6  style="width:120px">
						<OPTION value="user1">user1</OPTION>
						<OPTION value="user2">user2</OPTION>
						<OPTION value="user3">user3</OPTION>
						<OPTION value="user4">user4</OPTION>
						<OPTION value="user5">user5</OPTION>
					</SELECT>

					</TD>
					<TD align="center">
					<INPUT type="button" value="Ajouter >>>" onClick="Deplacer(this.form.liste1,this.form.liste2)">
					<BR><BR>
					<INPUT type="button" value="&lt;&lt;&lt; Enlever" onClick="Deplacer(this.form.liste2,this.form.liste1)">
					</TD>
					<TD align="center"><FONT size="2"><B>Activités retenues</B></FONT><BR>
					<SELECT align=top name="liste2" size=6 style="width:120px">
						<OPTION value="10">----------------------</OPTION>
					</SELECT>
					</TD>
					</TR></TABLE>
					<SCRIPT language="javascript">
						// Astuce pour Netscape qui ne supporte pas style="width:100"
						// Donc : création d'une ligne pour initialiser la largeur puis suppression par ce javascript
						document.formulaire.liste2.options.length=0;
					</SCRIPT>
					
					<input type="submit" value="Valider"/>
				</FORM>



			function Deplacer(l1,l2) {
				if (l1.options.selectedIndex>=0) {
					o=new Option(l1.options[l1.options.selectedIndex].text,l1.options[l1.options.selectedIndex].value);
					l2.options[l2.options.length]=o;
					l1.options[l1.options.selectedIndex]=null;
				}else{
					alert("Aucun utilisateur a été sélectionné");
				}
			}
A oui pardon pour finir afin de recuperer le contenu de la liste de droite j'ai un peut adapter le script.
A la validation du formulaire je recupére tous les élements de la liste qui m'interesse et je les glisse dans un input de type hidden

$("#listeDOptionsChoisies option").each(function(){
		$('#monInputHidden').val($(this).val()+'|'+$('#monInputHidden').val());
	});
$('#monInputHidden').val($('#monInputHidden').val().slice(0, -1));

voila !
oO ... je suis désolé mais je ne comprend pas ce que tu appelles et où...

je crois comprendre que tu insères une fonction qui boucle le contenu de ma liste2, ...
euh donc je suppose que je récupère le tout dans un "array" ??

Enfin je suis larguée là :s
Bon ok je te met plus de détail donc tu as ton formulaire :

<FORM name="formulaire" action="var.php" method="post"> 

<!--Ajout d'un input de type hidden -->
<input type="hidden" name="utilisateursChoisis"/>

                    <TABLE><TR> 
                    <TD align="center"><B><FONT size="2">Activités proposées</FONT></B><BR> 
                    <SELECT align=top name="liste1" size=6  style="width:120px"> 
                        <OPTION value="user1">user1</OPTION> 
                        <OPTION value="user2">user2</OPTION> 
                        <OPTION value="user3">user3</OPTION> 
                        <OPTION value="user4">user4</OPTION> 
                        <OPTION value="user5">user5</OPTION> 
                    </SELECT> 
 
                    </TD> 
                    <TD align="center"> 
                    <INPUT type="button" value="Ajouter >>>" onClick="Deplacer(this.form.liste1,this.form.liste2)"> 
                    <BR><BR> 
                    <INPUT type="button" value="&lt;&lt;&lt; Enlever" onClick="Deplacer(this.form.liste2,this.form.liste1)"> 
                    </TD> 
                    <TD align="center"><FONT size="2"><B>Activités retenues</B></FONT><BR> 
                    <SELECT align=top name="liste2" size=6 style="width:120px"> 
                        
                    </SELECT> 
                    </TD> 
                    </TR></TABLE> 
                    <SCRIPT language="javascript"> 
                        // Astuce pour Netscape qui ne supporte pas style="width:100" 
                        // Donc : création d'une ligne pour initialiser la largeur puis suppression par ce javascript 
                        document.formulaire.liste2.options.length=0; 
                    </SCRIPT> 
   <!--Modification ici aussi sur le submit -->                  
                    <input type="submit" value="Valider" onclick="checkForm()"/> 
                </FORM> 


Maintenant le JavaScript !!


// on a donc Deplacer
     function Deplacer(l1,l2) { 
                if (l1.options.selectedIndex>=0) { 
                    o=new Option(l1.options[l1.options.selectedIndex].text,l1.options[l1.options.selectedIndex].value); 
                    l2.options[l2.options.length]=o; 
                    l1.options[l1.options.selectedIndex]=null; 
                }else{ 
                    alert("Aucun utilisateur a été sélectionné"); 
                } 
            } 
//et check Form
function checkForm(){
// le but de check form est de parcourir tous les elements 
// de la liste de choix d'en extraire les valeurs et de les mettres dans un input
// on va les séparer ici dans cet exemple par des |
$("#liste2 option").each(function(){ 
        $('#utilisateursChoisis').val($(this).val()+'|'+$('#utilisateursChoisis').val()); 
    }); 
$('#utilisateursChoisis').val($('#utilisateursChoisis').val().slice(0, -1)); 
return true;
} 

Pour finir tu veux traiter ces utilisateurs dans ton PHP
donc quand tu envoie ton formulaire tu arrive sur un fichier PHP ou tu fais :

$tab=explode('|',$_POST['utilisateursChoisis']);
		foreach($tab as $idUser)
		{
                        // A la place du echo tu mettras ton traitement.
			echo $idUser;
		}
Désolé pour le délai de réponse, j'ai pas mal de projet en même temp avec plus ou moins des priorités Smiley smile

c'est déjà plus clair dans ma tête Smiley smile

Mais j'ai encore une erreur, il ne trouve pas utilisateursChoisis que j'appelle une fois mon formulaire validé.

utilisateursChoisis correspond au premier input, qui est en hidden ...

J'ai peut être oublié quelquechose ??
voici les manip que j'ai faite :
j'ai ajouté un input type hidden
modifier le submit pour le checkForm()
recopier tes deux fonctions Deplacer() et checkForm()...

J'ai essayé de regarder comme çà et je ne vois pas d'erreur, du moins dans les noms :s
Serait il possible que onclick(checkFrom()) du input type submit, soit appelé après l’envoi des données ??

et donc envoie donc un champ null ? mais il devrait envoyer un null et non un undefined oO
j'ai testé le contenu de mon $_POST['utilisateursChoisis']
si $_post...==null alors afficher null

et il m'affiche "null"...
je suppose donc que je ne reçois pas le contenu de ma liste..

SVP ! I need help !!
Dans mon script j'utilise jquery est-ce que tu utilises jquery ?
si ton erreur est $ is unedifiened c'est que tu n'as pas jquery. si j'ai le temps je te post la solution sans jquery.
daisy... serait il possible que tu cesses de pourrir toutes les discussions avec tes messages -_-'
je vois pas bien l'utilité de faire çà franchement...
Modifié par mini-truc (29 Apr 2011 - 10:41)
Passons et continuons :
Je me suis décidée à m'attaquer à JQuery !!
J'ai donc téléchargé la version "développment" que j'ai placer dans un fichier "JQuery.js"

J'appelle ma source :
<script type="text/javascript" src="JQuery.js"></script>

et rien de se passe ... Je recopie le code :

Formulaire Html :

Formulaire
				<FORM name="formulaire" action="var.php" method="post">
				<input type="hidden" name="utilisateursChoisis"/> 
					<TABLE><TR>
					<TD align="center"><B><FONT size="2">Liste des utilisateurs : </FONT></B><BR>
					<SELECT align=top name="liste1" size=6  style="width:120px">
					                <OPTION value="user1">user1</OPTION>
                                                        <OPTION value="user2">user2</OPTION>
                                                        <OPTION value="user3">user3</OPTION>
							<OPTION value="user4">user4</OPTION>

					</SELECT>

					</TD>
					<TD align="center">
					<INPUT type="button" value="Ajouter >>>" onClick="Deplacer(this.form.liste1,this.form.liste2)">
					<BR><BR>
					<INPUT type="button" value="&lt;&lt;&lt; Enlever" onClick="Deplacer(this.form.liste2,this.form.liste1)">
					</TD>
					<TD align="center"><FONT size="2"><B>Utilisateurs à ajouter</B></FONT><BR>
					<SELECT align=top name="liste2" size=6 style="width:120px">
						<OPTION value="10">----------------------</OPTION>
					</SELECT>
					</TD>
					</TR></TABLE>
					<SCRIPT language="javascript">
						// Astuce pour Netscape qui ne supporte pas style="width:100"
						// Donc : création d'une ligne pour initialiser la largeur puis suppression par ce javascript
						document.formulaire.liste2.options.length=0;
					</SCRIPT>
					
					<input type="submit" value="Valider" onclick="checkForm()"/> 
				</FORM>



La fonction deplacer et checkform():


		// on a donc Deplacer 
		 function Deplacer(l1,l2) {  
					if (l1.options.selectedIndex>=0) {  
						o=new Option(l1.options[l1.options.selectedIndex].text,l1.options[l1.options.selectedIndex].value);  
						l2.options[l2.options.length]=o;  
						l1.options[l1.options.selectedIndex]=null;  
					}else{  
						alert("Aucun utilisateur a été sélectionné");  
					}  
				}  
		//et check Form 
		function checkForm(){ 
			// le but de check form est de parcourir tous les elements  
			// de la liste de choix d'en extraire les valeurs et de les mettres dans un input 
			// on va les séparer ici dans cet exemple par des | 
			$("#liste2 option").each(function(){  
					$('#utilisateursChoisis').val($(this).val()+'|'+$('#utilisateursChoisis').val());  
				});  
			$('#utilisateursChoisis').val($('#utilisateursChoisis').val().slice(0, -1));  
			return true; 
		}  




Ici je récupère les données de ma liste2 :

<?php
$tab=explode('|',$_POST['utilisateursChoisis']); 
?>

<html>
<head>
<script type="text/javascript" src="JQuery.js"></script>
</head>

<body>
<?php
    foreach($tab as $idUser) 
    { 
        // A la place du echo tu mettras ton traitement. 
        echo 'utilisateur ajouté : '.$idUser; 
	} 
?>
</body>
</html>



pour le moment je voulais juste afficher la liste que çà me retournais pour tester le résultat... mais voila le probleme aucun resultat, il considère que c'est vide...
il entre une fois dans la boucle, affiche utilisateur ajouté et vide...

Smiley decu
1. si ce n'est pas deja fait télécharge mozilla firefox.
2. dans module complémentaire télécharge web-developper
3. affiche les erreurs javascript à l'aide des petites icones "V" "X" "!"
4. si il y en a essaie de les résoudre .
5. là ou tu recupére les données tu fait un print_r($_POST); et tu vérifies si dans $_POST['utilisateursChoisis'] tu as bien quelque chose comme ça : 5|8|15

Si non c'est que tu dois avoir une erreur dans le javascript. ($ is undefined c'est que le lien vers ton fichier jquery n'est pas bon)

Si oui alors c'est la boucle qui n'est pas bonne.
Si je fais çà :
print_r($_POST['utilisateursChoisis']);
echo $_POST['utilisateursChoisis'];

çà n'affiche rien.
j'essaierais ta solution avec web-designer sur FFX cette aprem en espérant trouver une solution
Résultat V X V
$("#utilisateursChoisis").val() is undefined

de la fonction checkForm() :
function checkForm(){
// le but de check form est de parcourir tous les elements
// de la liste de choix d'en extraire les valeurs et de les mettres dans un input
// on va les séparer ici dans cet exemple par des |
$("#liste2 option").each(function(){
$('#utilisateursChoisis').val($(this).val()+'|'+$('#utilisateursChoisis').val());
});
$('#utilisateursChoisis').val($('#utilisateursChoisis').val().slice(0, -1));
return true;
}
Pages :