S'identifier - S'inscrire - Ecrire un article - Contact

Tuto : ajouter des commentaires avec Ajax

Par rap • Tutoriels • Dimanche 07/06/2009 • 13 commentaires  • Lu 15795 fois • Version imprimable

Mots-clés : , , ,


Le système Ajax (regroupant html, JavaScript et PHP) peut s'adapter à Viabloga. Il permet un ajout de commentaire sans rechargement de la page, avec un formulaire juste en dessous de l'article.
 
 Faites le test et vous comprendrez : http://test-de-skins.viabloga.com/news/des-commentaire-en-ajax
 
 Impressionnant non ?
 
 C'est très pratique lorsque l'article comporte une vidéo, une musique, un jeu ou un autre contenu multimédia. Ajax est d'ailleurs utilisé sur des sites comme Youtube ou Dailymotion.
 
 Si vous êtes intéressé par ce système, voici la marche à suivre.
 
 Tout d'abord, ouvrez votre modèle de mise en page avec un éditeur ou le bloc note.
 Cherchez le code qui correspond au lien pour poster un commentaire :

 

<div class="postfoot">
<ul>
<object class=news_previous><li class="icon prev"><a href="<attribute url>" title="<attribute title> - <attribute published_t>">Article précédent</a></li></object>
<if_attribute reply_to_url!=><li class="icon"><a href="<attribute reply_to_url>">Commenter</a></li></if_attribute>
<object class=news_next><li class="icon next"><a href="<attribute url>" title="<attribute title> - <attribute published_t>">Article suivant</a></li></object>
</ul>
</div>

On va maintenant créer le formulaire :

<form>
 Nom :<br />
 <input id="name" value="" size="30" maxlength="100">
 <br />
 <br />
 Titre :<br />
 <input id="title-com" value="" size="30" maxlength="100">
 <br />
 <br />
 Message :<br />
 <textarea id="message" cols=30 rows=4 wrap="VIRTUAL"></textarea>
 <br />
 <br />
 <input id="BTsubmit" style="BACKGROUND-COLOR: #cccccc" type=button value="Envoyer" onclick="SendForm()" >
 <div id="textOK" style="visibility: hidden; display: none; font-weight:bold">Votre commentaire a été posté !</div>
</form>

Placez ce code juste avant la balise </object> qui se trouve juste après le premier code que je vous ai cité.

Maintenant, juste en dessous de ce code (toujours avant la balise </object>), on va placer le javascript :

 

<script type="text/javascript" src="http://test-de-skins.viabloga.com/files/prototype.js"></script>
<script type="text/javascript" src="http://test-de-skins.viabloga.com/files/scriptaculous.js"></script>
<script type="text/javascript" src="http://test-de-skins.viabloga.com/files/effects.js"></script>

<script type="" language="javascript">
function SendForm(){
 $('BTsubmit').disabled='disabled';
 $('BTsubmit').value='en cours ...';
 $('message').disabled='disabled';
 $('name').disabled='disabled';
 $('title-com').disabled='disabled';
 
 new Ajax.Request('/cgi-bin/comments.pl',{
  method: 'post',
  asynchronous: true,
  contentType:  'application/x-www-form-urlencoded',
  encoding:     'UTF-8',
  parameters: { site_id : '<SITE_ID>', news_id : '<attribute id>', type : 'add',action : 'process', author_unidentified : $F('name'), tetlit : $F('title-com'), htmlareatext : $F('message')},
  onSuccess: function(){MailOK();},
  onFailure: function(){}
 });

 function MailOK(){
  $('BTsubmit').style.visibility = 'hidden';
  $('BTsubmit').style.display = 'none';
  $('textOK').style.visibility = 'visible';
  $('textOK').style.display = 'block';
  Effect.BlindDown('commentaire');
  document.getElementById('commentaire').innerHTML = '<div class="comment alt1"><small class="comment_title"><cite>Votre commentaire :</cite></small><p class="comment_content">' + $F('message') + '</p><hr style="clear:both;margin:0px;padding:0px;width:0;" />';
 }
}
</script>
 

Voilà, on a terminé la première partie : celle de l'ajout du commentaire.

Maintenant, il faut afficher le commentaire qui vient d'être posté sans recharger la page.

Si vous descendez un peu, vous allez voir ce code :

 

<object class=comments>

 <a id="comments"></a>
 <h2 id="comments_title">Commentaires</h2>

Il suffit de placer le code suivant juste en dessous :

 </object>
 
 <div id="commentaire" style="display:none; height:150px"></div>
 
<object class=comments>
 <object class=comment count=1000>

La valeur "height:150px" peut être modifiée en fonction de la taille moyenne des commentaires posté sur votre site.

Et voilà c'est finit. Lorsque que l'internaute postera son commentaire, celui-ci apparaitra au dessus des autres avec un jolie mouvement de glisse. Puis lorsqu'il rechargera la page, son commentaire prendra sa place définitive : à la suite des autres.
 
Ce système ne prend pas en compte les réponse aux commentaires : dans ce cas i faut passer par la page habituelle.

Il y a cependant un petit problème que je vais essayé de régler : les accents ne s'affichent pas bien dans les commentaires.

D'autres articles sur des thèmes similaires :


Commentaires

par isabelle le Mercredi 10/06/2009 à 12:59

isabelle Merci Rap !! C'est très intéressant en effet pour ceux qui veulent répondre à un article de pouvoir le faire directement au bas du texte, d'autant plus qu'actuellement il faut cliquer une première fois sur "nb commentaires" puis encore sur "commenter" pour enfin écrire la réponse. Mon seul regret, c'est de ne plus avoir l'éditeur visuel qui permet d'insérer photos, liens, et d'avoir une mise en page riche du commentaire lui même. il va falloir que je fasse un choix !!


Re: par rap le Mercredi 10/06/2009 à 13:43

rap En améliorant un peu le script, on doit pouvoir y arriver. Je regarderai ça quand j'aurai un peu de temps.


Re: par rap le Mercredi 10/06/2009 à 14:09

rap En fait le script va bien plus loin que d'afficher la zone d'ajout de commentaire en bas de l'article, mais il faut poster un commentaire pour s'en rendre compte.

N'hésitez pas à poster des commentaires tests.


Re: par isabelle le Mercredi 10/06/2009 à 14:55

isabelle Super le fait de pouvoir mettre un commentaire sans que ça coupe le défilement de la vidéo !!


Re: par Visiteur le Mercredi 13/07/2011 à 13:20

 *ùmlkjhg


Si c'est pas trop demandé... par isabelle le Mercredi 10/06/2009 à 14:59

isabelle Est-ce que tu crois qu'on pourrait aussi avoir les champs "adresse web" et "adresse mail" pour identifier les commentateurs et être prévenu des réponses ?

hé, comment tu as fait pour avoir une deuxième ligne d'onglets ?


Re: Si c'est pas trop demandé... par rap le Mercredi 10/06/2009 à 15:04

rap Oui, j'ai donné le script le plus simple mais on peut ajouter tout ce qu'on veut. Il reste quand même quelques problèmes(notament l'affichage des accents) à régler puis je posterai un tuto plus complet.

Pour la deuxième ligne d'onglet, je les ais rajoutés manuellement avec un script appelé Lavalamp. Je pourrai aussi en faire un tuto à l'occasion.


Incompréhension par mohamed le Mardi 23/02/2010 à 14:17

 Bonjour, je viens de tester ce code et au niveau du commentaire qui apparait tout fonctionne impeccable, par contre j'essaie d'enregistrer le meme commentaire dans ma base de données mais ça ne fonctionne pas!

Voilà ce que j'ai fais : j'ai remplacé la ligne new Ajax.request... par  "new Ajax.Request('enregcom.php',{" et dans le fichier enregcom.php je recupere les variables par $_POST, je me connecte à mon serveur et j'enregistre ds ma base de données  ça fonctionne presque... disons que j'ai un enregistrement ds ma base de données mais vide!! Comment je fais pour récupérer les variables des 3 champs?

Merci pour l'éventuelle réponse, En tout cas merci pour ce code, ça fait un moment que je cherche!

Salut!


Re: Incompréhension par rap le Mercredi 24/02/2010 à 13:29

rap Je suis désolé mais je n'y connais pas grand chose en PHP.

Il faudrait que tu réussisses à trouver le script original qui est fait pour fonctionner avec PHP car je ne me souviens plus où je l'ai trouvé.


Re: Incompréhension par mohamed le Samedi 27/02/2010 à 15:16

 merci de ta réponse!

J'ai bidouillé et j'ai trouvé quelles étaient les variables à récupérer :

   $contenu=$_POST['htmlareatext'];
   $name=$_POST['author_unidentified'];

Pour ceux que ça pourrait éventuellement intéressé!
 


par michel le Mardi 04/05/2010 à 00:08

essayons ca !


Re: par kafka le Mardi 25/05/2010 à 16:11

Je n'arrive pas retrouver la <div class="postfoot"> 
je n'ai pas ça dans mon code, quelqu'un pourrait m'aider ?



Session

Pour participer plus facilement, ouvrez une session :

Identifiant de
mon blog
Nom d'utilisateur
Mot de passe

Si vous avez déjà un blog sur ViaBloga ou si vous avez ouvert un compte sur l'un d'entre eux, vous pouvez vous identifier avec votre nom d'utilisateur et mot de passe en précisant d'abord l'identifiant de votre blog.

S'inscrire

Discussions actives (+ commentaire)


Ailleurs sur ViaBloga

Derniers weblogs mis à jour :

22:52 - Photos Promenade
17:06 - Face B
15:28 -
14:34 -
14:11 - Asnières-sur-mon-blog
10:44 - GRASSE A TOUS
10:21 - CLEF 54 Coordination Lunévilloise Enfance Famille
09:19 - Everitouthèque
08:33 - Voleur d'âme
19:08 -

Toutes les mises à jour

Archives par mois