AJAX Comments プラグインの jQuery 対応

さて、すっかり jQuery ラブになってしまった私ですが、当サイトで使用している AJAX Comments 2.0 プラグインが Prototype.js + Script.aculo.us を使用しているため、jQuery.noConflict() しなければなりません。
で、AJAX Comments プラグインの javascript 部分を全面的に書き換えて jQuery 対応にしたので、ご紹介。
# ほとんどニーズのなさそうな改造ですが (^^;;

AJAX Comments Ver.2.7 をベースに修正しています。

まずは、20行目からはじまる Javascript 部分を以下のように変更。

 header("Content-Type:text/javascript");?>
$(function(){
 // get comment form
 var f = $('#commentform');

 // create loading image
 f.prepend($('<div id="ajax_comments_loading" style="display:none;margin:0 auto;padding:0 0 0 23px;width:100px;font:normal 12px Arial;background:url(<?php echo get_settings('siteurl').PLUGIN_AJAXCOMMENTS_PATH; ?>loading.gif) no-repeat 0 50%;">Submitting Comment...</div>'));
 $('#ajax_comments_loading').ajaxStart(function(){$(this).fadeIn('slow');}); // show loading
 $('#ajax_comments_loading').ajaxStop(function(){$(this).fadeOut('slow');}); // hide loading

 // comment form AJAX submit
 f.ajaxStart(function(){this.submit.disabled = true;}); // disable submit
 f.ajaxError(function(request, settings){alert(settings.responseText);}); // show error message
 f.ajaxStop(function(){this.submit.disabled = false; $('textarea', $(this)).val('');}); // enable submit, Reset comment
 f.submit(function(){
  var url = '<?php echo get_settings('siteurl').PLUGIN_AJAXCOMMENTS_PATH.PLUGIN_AJAXCOMMENTS_FILE; ?>?submit';
  var param = $('input, textarea', $(this)).serialize();
  $.post(
   url,
   param,
   function(responseText, status) {
    if (responseText.replace(/[\n\r]/g,'').match(RegExp("^<li.*>.*</li>$","i"))) {
//     // AuthImage
//    var img = $('#auth-image'), input = $('#code');
//    if(img.length> 0) img.attr('src', img.attr('src') + '?' + Math.random()); // Change AuthImage
//    if(input.length> 0) input.val(''); // Reset Code

     // append comments list
     var ol = $('#commentlist');
     if (ol.length <= 0) {
      ol = $('.commentlist:first');
      if(ol.length <= 0) {
       // commentslist doesn't exist (no posts yet)
       // so create it above the commentform and return it
       ol = $('<ol id="commentlist"></ul>');
       $(this).prepend(ol);
      }
     }
     ol.append($(responseText).hide());
     $('li:hidden', ol).slideDown('slow');
    } else {
     // show error message
     alert(responseText.replace(/<.*>/g,''));
    }
   }
  );

  return false;
 });
});
<?php endif; ?>

続いて 216 行目以降最終行までを以下のように修正して、prototype.js + Script.aculo.us をロードしないように変更。

add_action('wp_footer','ajax_comments_js'); // Set Hook for outputting JavaScript
function ajax_comments_js() { if(is_single()): ?>
<script type="text/javascript" src="<?=get_settings('siteurl').PLUGIN_AJAXCOMMENTS_PATH.PLUGIN_AJAXCOMMENTS_FILE?>?js"></script>
<? endif; }
?>

1 thought on “AJAX Comments プラグインの jQuery 対応

  1. ピンバック: jQuery で Wordpress のコメント投稿を Ajax 化 : 独断と偏見の何でもレビュー

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください