Un système de commentaires avec jQuery (1)

Dans la série jQuery voici un petit système de commentaire ! L’idée est simple : un utilisateur peut remplir un formulaire pseudo+commentaire et lorsqu’il l’envoie, hop son message apparait sans rechargement de la page en tête des autres commentaires. Pour l’instant pas d’Ajax, donc pas d’enregistrement dans une base de données, mais c’est pour le prochain article : un système de commentaire avec jQuery en Ajax (2) ! D’abord le code HTML :

<form action="?id=commentaire" method="post" id="form">
 <fieldset>
 	<legend>Ajouter un commentaire</legend> 
	<label for="pseudo">Pseudo</label>
 	  <input type="text" name="pseudo" id="pseudo" />
 	<br />
 	<label for="contenu">Commentaire</label>
 	  <textarea name="contenu" id="contenu" rows="4" cols="4"></textarea> 
	<br />
 	<input type="submit" value="Ok" />
 </fieldset>
 </form>
 <div id="commentaire">
 	<p class="last pair first" id="com_1"><strong>BN</strong> a dit :<br />Coucou !  Je m'appelle BN et je suis un BN, et toi, tu fais quoi dans la vie ?</p>
 </div>

On voit bien le formulaire tout ce qu’il y a de plus classique ! On pourrait donc tout à fait gérer ce système de commentaire exclusivement en PHP (ou autre). Et il faudrait d’ailleurs le faire pour éviter d’écrire du Javascript obstrusif. La balise #commentaire contiendra les différents commentaires, et il y en a d’ailleurs déjà un ! Maintenant, place au code jQuery :

 $(document).ready(function() {
 	// Au submit du formulaire
 	$('#form').submit( function() { 
		var pseudo = $('#pseudo').val();
 		var commentaire = $('#contenu').val();
 		// On ajoute le nouvel élément
 		$('#commentaire').prepend('<p class="last" id="com_'+nbCom+'"><strong>'+pseudo+'</strong> a dit :<br />'+commentaire+'</p>');
 		// On efface le contenu du formulaire
 		$('#contenu').val('').focus();
 		// On retourne false pour ne pas recharger la page
 		return false;
 	});
});

On récupère la valeur des champs pseudo et contenu, et les ajoute juste avant le contenu de la balise #commentaire. Reste à effacer le champ contenu (j’ai supposé ici que c’était pratique de garder le pseudo) et on renvoie false pour éviter le rechargement de la page. Classique. Maintenant, on va ajouter quelques fonctionnalités :

• On ajoute un commentaire seulement si les champs pseudo et contenu sont non nulles. Si ce n’est pas le cas : petit message d’erreur.
• Il faut que le premier commentaire ait la classe first, et le dernier la classe last.
• En plus de tout ça, les commentaires devront alterner les classes pair et impair.

C’est parti :

$(document).ready(function() {
 	// Au submit du formulaire
 	$('#form').submit( function() {
 		var pseudo = $('#pseudo').val();
 		var commentaire = $('#contenu').val();
 		// On supprime les anciens messages d'erreurs ou de succès
 		$('.erreur').remove();
 		$('.ok').remove();
 		// Si on a commentaire à ajouter
 		if (pseudo != '' && commentaire != '') {
 			// On compte le nombre de commentaire déjà présent + celui qui va être créé
 			var nbCom=1;
 			$('#commentaire p').each(function() { nbCom++; });
 			// On enlève la class "last" à l'ancien dernier
 			$('.last').removeClass('last');
 			// On ajoute le nouvel élément
 			$('#commentaire').prepend('<p class="last" id="com_'+nbCom+'"><strong>'+pseudo+'</strong> a dit :<br />'+commentaire+'</p>');
 			// On le met pair ou impair
 			if ($('.last').next().is('.pair'))
 				$('.last').addClass('impair');
 			else
 				$('.last').addClass('pair');
 			if (!$('.last').next().is('p'))
 				$('.last').addClass('first');
 			// On efface le contenu du formulaire
 			$('#contenu').val('').focus();
 			$('#contenu').after('<span class="ok">Commentaire ajouté avec succès</span>');
 			$('.ok').hide().fadeIn('slow');
 		} 		else {
 			if (pseudo == '')
 				$('#pseudo').after('<span class="erreur">Champ requis</span>');
 			if (commentaire == '')
 				$('#contenu').after('<span class="erreur">Champ requis</span>');
 			$('.erreur').hide().fadeIn('slow');
 		}
 		// On retourne false pour ne pas recharger la page
 		return false;
 	});
});

Tester ce code (bon, faudrait rajouter un peu de CSS hein). Moralité, la prochaine étape c’est l’Ajax et l’appel asynchrone à PHP.

Dans le même style

Un système de commentaire avec jQuery en Ajax (2) Lire un fichier XML avec jQuery Utiliser une fonction PHP avec jQuery à l’aide de get Action lors de la modification d’un champ : change(function) Plugin WiKiss pour protéger le wiki par un mot de passe