Discussion :

[gtraxx]

Bonjour à tous ,je doit construire un truc un peux space pour mon boss et je cherche comment m'y prendre.
En faites j'ai une liste d'élément comme un nuage de TAG , chaque éléments est en faites une catégorie.
Je doit rendre ses éléments cliquable qui s'ajoute dans un champs texte,
Donc par exemple: j'ai une liste contenant :
Test , Verbe , jQuery , Bonhomme , etc ...
Il faut que chaque mots puisse être ajouter dans un champs texte plus bas et qui biensur place une virgule ou point virgule automatiquement.
J'ai essayer un simple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
$(function() {
	$('.test').bind('click', function() {
	$('sector_activity')
		.append('test');
		this.blur();
	});
});

Mais sa ne fonctionne pas , Un plugin m'aiderai bien pour ne pas devoir écrire tout un barda vu que je doit terminé sa pour tout à l'heure

[Kerod]

append n'est vraiment pas fait pour ça

Append content to the inside of every matched element.
This operation is similar to doing an appendChild to all the specified elements, adding them into the document.

Il faudrait que tu utilises une fonction du style text().

Petit exemple totalement en jQuery (pas testé) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
$(function() {
    $('.test').bind('click', function() {
       var texte = jQuery.trim($('#sector_activity').text());
       if(texte.length > 0) 
        $('#sector_activity').text(texte + ', ' + $(this).html());
    else
           $('#sector_activity').text($(this).html());
       this.blur();
    });
});

avec sector_activity l'id de l'input et .test un élément HTML contenant le texte que tu veux mettre dans ton input

[gtraxx]

Ben j'ai essayer ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
$(function() {
   $('.activity').bind('click', function() {
   if($('#sector_activity').length > 0)
       $('#sector_activity').val($('#sector_activity').val()+$(this).text()+', ');
   else
       $('#sector_activity').val($('#sector_activity').val()+$(this).text());
   this.blur();
   });
});

Seulement ma condition ne sert a rien, je souhaitais dire que si un seul mots est contenu dans le champs de destination, ne pas ajouter de virgule.
Mais "Si" le champs contient plus d'un mots ajouter la virgule

Pour l'instant cela n'ajoute que les mots un à la suite des autres avec chaque fois la virgule.
Pour bien faire faudai aussi implémenter que si l'ont clique une deuxième fois sur un même mots le supprimer du champs de destination.

[Kerod]

Ben j'ai essayer ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
$(function() {
   $('.activity').bind('click', function() {
   if($('#sector_activity').length > 0)
       $('#sector_activity').val($('#sector_activity').val()+$(this).text()+', ');
   else
       $('#sector_activity').val($('#sector_activity').val()+$(this).text());
   this.blur();
   });
});

Seulement ma condition ne sert a rien, je souhaitais dire que si un seul mots est contenu dans le champs de destination, ne pas ajouter de virgule.
Mais "Si" le champs contient plus d'un mots ajouter la virgule

Pour l'instant cela n'ajoute que les mots un à la suite des autres avec chaque fois la virgule.

C'est pourquoi il est préférable d'ajouter la virgule avant insertion du mot et non comme tu le fais. D'où ce que j'avais proposé.

[gtraxx]

je viens de tester :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
$('.activity').bind('click', function() {
       var texte = $.trim($('#sector_activity').text());
       if(texte.length > 0) 
        $('#sector_activity').text(texte + ', ' + $(this).html());
    else
           $('#sector_activity').text($(this).html());
       this.blur();
    });
});

Mais cela n'ajoute rien, je clique dans le vide lol
C'est surement du au fais que j'ajoute des éléments texte dans un champs ?

[Kerod]

Oui je connais pas de tête toutes les fonctions. Pour les input c'est val()

[gtraxx]

oui c'est bien val lol, je l'avais fais plus haut, maintenant je l'ai modifier correctement pour mes besoins.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
$('.activity').bind('click', function() {
       var texte = $.trim($('#sector_activity').val());
       if(texte.length > 0) 
        $('#sector_activity').val(texte + ', ' + $(this).text());
    else
           $('#sector_activity').val($(this).text());
       this.blur();
    });

Par contre pour le fais que si je reclique sur un mots, il est supprimé c'est faisable mais ou mettre mon remove ?? la est la question

[Kerod]

Une solution serait de désactiver le clic sur le lien ou l'élément cliqué Pour ne pas compliquer les choses

Tu utilises quoi ?

[gtraxx]

Ben j'utilise ce qu'il y a de plus simple pour l'instant :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<div id="activityList">
			<a href="#" class="activity">Batiment</a>, <a href="#" class="activity">Esthetique</a>, <a href="#" class="activity">Coiffure</a>
			</div>
<textarea class="required" id="sector_activity" name="sector_activity" readonly="true" value="" cols="45" rows="5"></textarea>

Par contre j'ai pas saisi ce que vous vouliez dire sur le "désactiver le clique"
Je suis un peux à la masse aujourd'hui lol

[Kerod]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(this).attr("onclick","return false");

Devrait marcher

[gtraxx]

je viens de tester mais cela ne change rien, il faudrai un truc du genre si click remove class ou un truc comme sa.
Ben je vois le code mais je ne sais pas quel méthode appliqué c'est la tout le probléme

[Kerod]

Tu peux mettre le code que tu utilises contenant le code généré par le navigateurs ??

[gtraxx]

Voici le code dans le navigateur

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<script type="text/javascript">
$(function() {
  $('.activity').bind('click', function() {
       var texte = $.trim($('#sector_activity').val());
       if(texte.length > 0) 
        $('#sector_activity').val(texte + ', ' + $(this).text());
    else
           $('#sector_activity').val($(this).text());
       this.blur();
       $(this).attr("onclick","return false");
    });
});
</script>

Et la le code générer par Firebug si je clique sur un des liens :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
<a class="activity" title="sante" href="#" onclick="return false">sante</a>

[Kerod]

Exemple fonctionnel :

Code html :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
  <title>Hello!</title>
  <script language="JavaScript" src="jquery.js" type="text/javascript"></script>
    <script type="text/javascript">
$(function() {
  $('.activity').bind('click', function() {
       if(!$(this).hasClass("selected"))
       {var texte = $.trim($('#sector_activity').val());
       if(texte.length > 0)
        $('#sector_activity').val(texte + ', ' + $(this).text());
    else
           $('#sector_activity').val($(this).text());
       this.blur();
       $(this).addClass("selected");
        }
        return false;
    });
});
</script>
 
</head>
 
<body>
 
     <a class="activity" title="sante" href="#">sante</a>
     <input type="text" id="sector_activity" value="" />
</body>
 
</html>

[gtraxx]

Ah oui bien vu
merci Kerod
Honte à moi