web-dev-qa-db-fra.com

Activer Soumettre un commentaire sans rechargement de page (avec Ajax)?

Lorsque l'utilisateur écrit un commentaire et clique sur le bouton Envoyer, WordPress recharge la page avant que le commentaire ne soit affiché à l'utilisateur.

Existe-t-il une solution basée sur Ajax permettant aux utilisateurs de soumettre des questions de manière dynamique, sans actualiser la page?

commentsjqueryjavascriptajax
7
its_me

Enregistrez le fichier javascrip suivant wpse54189-ajax-comments.js dans votre dossier de plug-in - dites plugins/plug-in-name/js (ou si cela doit aller à votre thème, dans votre dossier de thèmes).

/*
 * jQuery autoResize (textarea auto-resizer)
 * @copyright James Padolsey http://james.padolsey.com
 * @version 1.04
 */

(function(a){a.fn.autoResize=function(j){var b=a.extend({onResize:function(){},animate:true,animateDuration:150,animateCallback:function(){},extraSpace:20,limit:1000},j);this.filter('textarea').each(function(){var c=a(this).css({resize:'none','overflow-y':'hidden'}),k=c.height(),f=(function(){var l=['height','width','lineHeight','textDecoration','letterSpacing'],h={};a.each(l,function(d,e){h[e]=c.css(e)});return c.clone().removeAttr('id').removeAttr('name').css({position:'absolute',top:0,left:-9999}).css(h).attr('tabIndex','-1').insertBefore(c)})(),i=null,g=function(){f.height(0).val(a(this).val()).scrollTop(10000);var d=Math.max(f.scrollTop(),k)+b.extraSpace,e=a(this).add(f);if(i===d){return}i=d;if(d>=b.limit){a(this).css('overflow-y','');return}b.onResize.call(this);b.animate&&c.css('display')==='block'?e.stop().animate({height:d},b.animateDuration,b.animateCallback):e.height(d)};c.unbind('.dynSiz').bind('keyup.dynSiz',g).bind('keydown.dynSiz',g).bind('change.dynSiz',g)});return this}})(jQuery);


/*
 * Source: wp-comment-master WordPress Plugin
 * URL: http://wordpress.org/extend/plugins/wp-comment-master/
 * Author URI: http://yjlblog.com
 * Version: 1.7
 * Last Updated: 2011-6-6
 */

   var $commentlist=jQuery('.commentlist');
   var $respond=jQuery('#respond');
   var $message=jQuery('<span class="yjl-mes"></span>').appendTo("#commentform");;
   var $list=$commentlist.children();
   var totalCom=$list.length;
   var $textarea=$respond.find('#comment').attr('rows','8');

   var currentPage=0,$number,numPerPage,totalPage,$reply;

   //track a reply comment
   jQuery('.comment-reply-link').live('click',function(){
       $reply=true;
   });
   var $cancel=jQuery('#cancel-comment-reply-link').click(function(){
       $reply=false;
   });

   /*
    *if Ajax comment posting is enabled
    */
   jQuery('#commentform').submit(function(){
       jQuery.ajax({
         beforeSend:function(xhr){
            xhr.setRequestHeader("If-Modified-Since","0");
            $message.empty().append('<img src="'+yjlSettings.gifUrl+'" alt="processing...">');
         },
         type:'post',
         url:jQuery(this).attr('action'),
         data:jQuery(this).serialize(),
         dataType:'html',
         error:function(xhr){
             if(xhr.status==500){
               $message.empty().append(xhr.responseText.split('<p>')[1].split('</p>')[0]);
             }
             else if(xhr.status=='timeout'){
               $message.empty().append((yjlSettings.timeOut!=''?yjlSettings.timeOut:'Error:Server time out,try again!'));
             }
             else{
               $message.empty().append((yjlSettings.fast!=''?yjlSettings.fast:'Please slow down,you are posting to fast!'));
             }
         },
         success:function(data){
            $message.empty().append((yjlSettings.thank!=''?yjlSettings.thank:'Thank you for your comment!'));
            $newComList=jQuery(data).find('.commentlist');
            if(totalCom>0){
               if($reply)$cancel.trigger('click');
               else {
                   if(yjlSettings.order=='desc')currentPage=0;
                   else { getTotal($newComList);currentPage=totalPage-1;}
               }
               if(yjlSettings.pagination=='disable' || yjlSettings.pagerPos=='after')
                        $commentlist.prev().replaceWith($newComList.prev());
               else $commentlist.prev().prev().replaceWith($newComList.prev());                     
               $commentlist.replaceWith($newComList);                            
            }else{
               if(yjlSettings.repForm=='disable')$newComList.prev().andSelf().insertBefore($respond);
               else $newComList.prev().andSelf().insertAfter($respond);
            }
            $commentlist=$newComList;
            if(yjlSettings.pagination!='disable')pagination();
            $textarea.val(''); 
         }
       });//end of ajax
      return false;
   });//end of submit function

   if(yjlSettings.autoGrow!='disable'){
      $textarea.autoResize({
       // On resize:
       onResize : function() {
        jQuery(this).css({opacity:0.8});
      },
      // After resize:
      animateCallback : function() {
        jQuery(this).css({opacity:1});
      },
      // Quite slow animation:
      animateDuration : 300,
      // More extra space:
      extraSpace : 20
      });
   }

Le code ci-dessus utilise une variable qui stocke l'emplacement d'une image de chargement 'ajax' (voir ci-dessous). Nous devons donner à cette variable l'emplacement de l'image, qui devrait être votre dossier de plug-in, par exemple plugins/plug-in-name/img (ou encore, si vous devez, le dossier de votre thème). Nous allons utiliser wp_localise_script.

Cependant, nous devons d’abord enregistrer ce script avec WordPress, en listant jquery comme dépendance:

add_action('init','wpse54189_register_script');
function wpse54189_register_script(){
    //Register script
    wp_register_script( 'wpse54189_ajax_comment', plugin_dir_path(__FILE__ ).'js/wpse54189-ajax-comments.js',array('jquery'));

    //Add global variable storing ajax image
    wp_localize_script( 'wpse54189_ajax_comment', 'yjlSettings', array(
         'gifUrl'=> plugin_dir_path(__FILE__ ).'img/ajax-loader.gif',

         /* remove this line if you don't want the comment textbox's height
         to increase with the size of comment. */
         'autoGrow'=> 'enable'
    ));

}

Ensuite, lorsque vous souhaitez mettre le fichier en file d'attente: wp_enqueue_script('wpse54189_ajax_comment') - ceci imprimera automatiquement les variables et garantira que jquery est chargé à l'avance.

Cela peut être placé dans des fichiers modèles, ou pour les plug-ins, vous pouvez mettre le script en file d'attente sur un hook (par exemple, le hook comment_form_before):

add_action('comment_form_before','wpse54189_register_script'){
     wp_enqueue_script('wpse54189_ajax_comment')
}

Vous pouvez obtenir un gif de chargement Nice Ajax de ici . Ou simplement utiliser ceci:

Loading gif

Tout le code JavaScript a été récupéré à partir de wp-comment-master plugin (bien sûr, j'ai supprimé les extraits inutiles - je n'ai gardé que ce qui était nécessaire).

5
its_me

Oui, il y a beaucoup de solutions, regardez-la ici: http://wordpress.org/extend/plugins/search.php?q=ajax+comments

2
Eugene Manuilov