Bonjour a tous les zéros,

Je suis en train de mettre en place une sorte de bbcode sur mon site web et j'utilise jQuery pour mettre en place les balises directement dans le texte. Pour l'instant je n'en suis pas à l'insertion, mais à récupérer la valeur et à la mettre en place.

Voici ma liste déroulante :

<select id="couleur">
<option value="rien">Couleur...</option>
<option value="grey">Gris</option>
<option value="black">Noir</option>
<option value="red">Rouge</option>
<option value="maroon">Marron</option>
<option value="lime">Vert clair</option>
<option value="green">Vert foncé</option>
<option value="yellow">Jaune</option>
<option value="blue">Bleu</option>
<option value="purple">Violet</option>
</select>

Et mon script jQuery. Je précise juste que je n'en suis qu'à la récupération, et non à l'insertion :

<script type="text/javascript">
		   $(document).ready(function()
		   {
		   $("#couleur").change(couleur);
		   }
		   )
		   function (couleur)
		   {
		   var couleur  = $("#couleur option:selected");
		   if (couleur != "choix")
		   {
		   var texte = 'Bonjour !';
                   var dCouleur = '[couleur="' + couleur + '"]';
		   var fCouleur = '[/couleur]';
		   alert(dCouleur + texte + fCouleur);
		   }
		   }
</script>

Forcément, lorsque j'arrive sur ma page, et que je choisis une couleur différente, rien ne s'affiche, alors que j'attends un message, avec par exemple

[couleur="purple"]Bonjour[/couleur]

Merci d'avance de votre aide !

Comme ceci ?

$(document).ready(function() {
	$("#couleur").change(function() {
	var $c  = $("#couleur option:selected").val();

	var texte = 'Bonjour !';
	var dCouleur = '[couleur="' + $c + '"]';
	var fCouleur = '[/couleur]';
	alert(dCouleur + texte + fCouleur);
	});
});

Hélas, toujours le même résultat, voici mon code modifié :

<script type="text/javascript">
		   $(document).ready(function()
		   {
		   $("#couleur").change(function()
		   {
		   var couleur  = $("#couleur option:selected");
		   if (couleur != "choix")
		   {
		   var texte = 'Bonjour !';
           var dCouleur = '[couleur="' + couleur + '"]';
		   var fCouleur = '[/couleur]';
		   alert(dCouleur + texte + fCouleur);
		   }
		   }
		   }
		   </script>

Lorsque je sélectionne un élément de ma liste ( que je choisis gris, par exemple ) rien ne se passe, comme un formulaire classique.

Mon fichier jQuery.js est bien inclus, j'ai vérifié son chemin en regardant la source.

Je ne vois pas ce qui cloche

EDIT : J'ai testé avec ton code et cela marche, qu'est ce qui ne va pas par rapport au mien ?

Il est où le .val() ?

Et à la ligne 8, "choix" existe nulle part dans le HTML.

Merci beaucoup de ton aide, j'ai corrigé mes erreurs. J'avais oublié de fermer les parenthèses, et, effectivement, le .val() manquait.

Merci beaucoup.

Voici le code corrigé :

$(document).ready(function()
		   {
		   $("#couleur").change(function()
		   {
		   var couleur  = $("#couleur option:selected").val();
		   
		   if (couleur != "rien")
		   {
	 	   var texte = 'Bonjour !';
                   var dCouleur = '[couleur="' + couleur + '"]';
		   var fCouleur = '[/couleur]';
		   var bbcode = dCouleur + texte + fCouleur;
		   alert(bbcode);
		   }
		   })
		   })

Bonjour,

J'ai finalement de nouveau ce problème, pourtant, il me semble avoir bien suivi ce qui est marqué ci-dessus.

Voici mon code :

$("#titre").change(titre);

function titre()
		   {
		   var titre  = $("#titre option:selected").val();
		   
		   if (titre == "rien")
		   {
           var dTitre = '[titre' + titre + ']';
           var fTitre = '[/titre]';
		   insertTag(dTitre, fTitre);
		   }
		   }

Pourtant, le problème ne peut venir de l'extérieur du code ( parenthèses mal fermée, ... ), car mes autres fonctions marchent correctement.

Merci d'avance !

Plus de précisions ? Quel est le comportement attendu ? Quel est le comportement actuel ? Le code HTML pour qu'on puisse tester, il est où ?

Bonjour,

Alors, voici le html :

<select id="titre">
<option value="rien">Titre...</option>
<option value="1">Très gros titre</option>
<option value="2">Gros titre</option>
<option value="3">Titre</option>
</select>

La fonction insertTag

function insertTag(startTag, endTag) 
			   {
			   var textareaId = "article";
			   
        var field  = document.getElementById(textareaId); 
        var scroll = field.scrollTop;
        field.focus();
        
        if (window.ActiveXObject) { // C'est IE
                var textRange = document.selection.createRange();            
                var currentSelection = textRange.text;
                
                textRange.text = startTag + currentSelection + endTag;
                textRange.moveStart("character", -endTag.length - currentSelection.length);
                textRange.moveEnd("character", -endTag.length);
                textRange.select();     
        } else { // Ce n'est pas IE
                var startSelection   = field.value.substring(0, field.selectionStart);
                var currentSelection = field.value.substring(field.selectionStart, field.selectionEnd);
                var endSelection     = field.value.substring(field.selectionEnd);
                
                field.value = startSelection + startTag + currentSelection + endTag + endSelection;
                field.focus();
                field.setSelectionRange(startSelection.length + startTag.length, startSelection.length + startTag.length + currentSelection.length);
        } 

        field.scrollTop = scroll; // et on redéfinit le scroll.
}

PS : Fonction prise sur un tutoriel pour ajouter les balises autour du texte.

Le but est donc d'avoir les balises autour, si on a sélectionné le très gros titre :

[titre1]Le texte que l'on sélectionne[/titre]

Il me semble j'ai désormais tout dit.

Merci d'avance

Tu veux pas plutôt essayer de faire ce code en jQuery ? Etant donné que c'est le titre du sujet et que je t'ai donné une solution en jQuery, autant continuer.

jQuery permet l'insertion d'éléments à l'endroit du curseur dans un textarea et la modification de la sélection ? (J'en doute)

Hum, peu importe, lorsque je fais un alert() dans la fonction, ça ne marche pas.

Le bug doit donc être localisé là-bas

Up !

Pas de nouvelle du pourquoi ce code ne s'exécuterait pas ?

EDIT : Je précise bien que le problème n'est pas pour la fonction insertTag, car elle marche très bien pour les autres.

Si je change ma fonction titre en la faisant comme ça :

function titre()
		   {
alert("Bonjour");
		   }

Il ne se passera rien non plus, malheureusement !

EDIT 2 : J'ai finalement trouvé, j'avais déjà un id dans mon code html.

Erreur toute bête malheureusement.

Merci quand même de votre aide.