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
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
merci à tous !!
Nouvelle fonction : je l'explique à la fin mais mieux vaut se répéter que pas assez
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 :
Le JS :
edit ! Solution encore apporté par Su4p ! (un grand merci à lui !!!) :
Modifié par mini-truc (03 May 2011 - 16:53)
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
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
merci à tous !!
Nouvelle fonction : je l'explique à la fin mais mieux vaut se répéter que pas assez
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="<<< 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;
} Modifié par mini-truc (03 May 2011 - 16:53)
