Vie de ViaBloga

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.