さて、すっかり 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; } ?>
ピンバック: jQuery で Wordpress のコメント投稿を Ajax 化 : 独断と偏見の何でもレビュー