さて、すっかり jQuery ラブになってしまった私ですが、当サイトで使用している AJAX Comments 2.0 プラグインが Prototype.js + Script.aculo.us を使用しているため、jQuery.noConflict() しなければなりません。
で、AJAX Comments プラグインの javascript 部分を全面的に書き換えて jQuery 対応にしたので、ご紹介。
# ほとんどニーズのなさそうな改造ですが (^^;;
AJAX Comments Ver.2.7 をベースに修正しています。
まずは、20行目からはじまる Javascript 部分を以下のように変更。
20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | 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 をロードしないように変更。
216 217 218 219 220 | add_action('wp_footer','ajax_comments_js'); // Set Hook for outputting JavaScriptfunction 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 化 : 独断と偏見の何でもレビュー