Un système de commentaires avec jQuery (1)

Publié dans Javascript | Marqué avec , ,
Share

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.

14 réponses à Un système de commentaires avec jQuery (1)

  1. wassimos

    c’est un très bon tutoriel :)) mercii pour le partage

  2. Natha

    Tres bon tuto !

  3. Ping : Système de commentaires avec jQuery en Ajax (2) - 30 minutes par jour

  4. Ping : Utiliser une fonction PHP avec jQuery get - 30 minutes par jour

  5. amina

    très utile

  6. mohamed

    merci pour votre aide

  7. alex

    c beaaau

  8. sabanca

    cool le tuto merci.

    Si oui comment s’il te plait. Merci

  9. sabanca

    c’est possible d avoir le meme? 😀

  10. sbei

    est ce que vous avez essayé ceci avec Symfony

  11. Corentin

    Bonjour ! J’ai un problème ! Ça ne marche pas ! Je suis un peu novice en Jquery !
    J’ai intégré dans le html, , et en gros les trois éléments nécessaires et indiqué ci dessus! Cependant ça ne marche pas!
    Je vois que dans l’exemple (quand on clique sur « tester ce code ») un élément a été modifié action= »?id=commentaire » en action= »jquery.html » , le nom de la page. Dois-je faire cela également ?
    Aussi ! J’ai placé cela :

    dans le head! Ai-je bien fait ?
    Si oui pour tout ! Ca ne marche toujours pas ! Que dois-je faire =) ?

    Merci
    Corentin =)

  12. Merci pour cette aide magnifique

  13. orphée

    salut et merci pour ce tuto mais moi j’ai toujours des problèmes avec ajax donc s’il vous plait je préfère avoir tout le code avec les liens pour que çà marche svp j’ai besoin d’aide… tout le code… avec la librairie que vous avez utilisées..!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*