Ajouter des éléments dans un champ text

Version imprimable

07/01/2009, 11h00
gtraxx

Ajouter des éléments dans un champ text
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:

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 :(

append n'est vraiment pas fait pour ça :aie:

Citation:

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:

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

Ben j'ai essayer ceci :
Code:

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 :aie:

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.
:aie:

Citation:
Envoyé par gtraxx
Ben j'ai essayer ceci :
Code:

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 :aie:

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é. :aie:

je viens de tester :

Code:

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 ?

07/01/2009, 13h09
Kerod

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

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

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 :aie:

07/01/2009, 15h28
Kerod

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

Tu utilises quoi ?

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

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" :mouarf:
Je suis un peux à la masse aujourd'hui lol

07/01/2009, 16h56
Kerod

Code:

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

Devrait marcher :roll:
08/01/2009, 09h20
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 :?
08/01/2009, 12h45
Kerod

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

Voici le code dans le navigateur

Code:

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:

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

Exemple fonctionnel :

Code:

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>

08/01/2009, 15h22
gtraxx

Ah oui bien vu
merci Kerod
Honte à moi :oops: