さて、すっかり 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; }
?>
つぶやく
タイトル通り。/Prototype.jsからjQueryへの移行が増えてきたな……。