AJAX Commentsプラグインを使用して、コメント POST を Ajax 化していたのだが、最新バージョンの 2.09 では有料になったようだ。
そんなわけで jQuery で、同等のことができるようなコードを書いてみた。
現在、このサイトではこの機能は有効になっていないので、コメント欄でテストしないでください。
基にしたコードは、以前 AJAX Comments プラグインを jQuery 対応させたときに書いたもの。
AJAX Comments プラグインでは、コメント POST 先を独自の PHP にしているが、今回のコードは WordPress の標準のまま wp-comments-post.php
に対して POST している。
$(function(){ var commentform_id = 'commentform'; // コメントフォームの ID var commentlist_id = 'commentlist'; // コメントリストの ID var loading_img = 'loading.gif'; // コメント POST 時に表示する画像 var loading_txt = 'Submitting Comment...'; // コメント POST 時に表示する文字 // コメントフォーム var commentform = $('#' + commentform_id); // コメント POST 開始時の処理 (form を使用できないように block) commentform.ajaxStart(function(){ this.submit.disabled = true; // disable submit $(this).block(' <div style="margin: 0 auto; padding: 0 0 0 23px; width: 100px; font: normal 12px Arial; background: url(' + loading_img + ') no-repeat 0 50%;">' + loading_txt + '</div> ',{ border: '1px solid #8C8C8C' }); }); // コメント POST エラー時の処理 commentform.ajaxError(function(request, settings){ // alert message alert(settings.responseText.replace(/[\r\n]/g, '').replace(/.* (.*?)<\/p>.*/i, '$1')); }); // コメント POST 終了時の処理 commentform.ajaxStop(function(){ this.submit.disabled = false; // enable submit $(this).unblock(); }); // コメント POST 処理 commentform.submit(function(){ // IE Hack if ($.browser.msie) { var redirect_to = $('input[@name=redirect_to]', $(this)); var date = new Date(); redirect_to.attr('value', redirect_to.attr('value') + '?comments=' + date.getYear() + date.getMonth() + date.getDate()); } // POST var url = $(this).attr('action'); var param = $('input, textarea', $(this)).serialize(); $.post( url, param, function(responseText, status) { // コメントリストの取得 var commentlist = $('#' + commentlist_id); if (commentlist.length <= 0) { commentlist = $('.' + commentlist_id + ':first'); if(commentlist.length <= 0) { commentlist = $(' <ul id="' + commentlist_id + '"></ul> '); commentform.prepend(ul); } } // コメントリストに response をセットする var re = new RegExp('<[ou]l .*(class|id)=["\']' + commentlist_id + '["\'].*?>(<li.*?>.*?<\/li>)<\/[ou]l>', 'i'); var comments = responseText.replace(/[\r\n]/g, '').match(re); if (comments) { // コメントリストへの追加 if (comments.length > 1) { commentlist.animate({opacity:'hide'}, 'normal', function(){ $(this).html(comments[2]).animate({opacity:'show'}, 'fast'); }); } $('textarea', commentform).val(''); // Reset comment } else { // エラーメッセージ表示 alert(responseText.replace(/[\r\n]/g, '').replace(/.* (.*?)<\/p>.*/i, '$1')); } } ); return false; }); });
jQuery BlockUI Plugin を使用して、コメント POST 時にコメントフォームをいじれないようにしている。
こめんとさせて
rくぇrくぁ
テストさせてください
テスト失礼させていただきます。
テストさせて頂きます!
テスト
テストその2
テストさせてください
ピンバック: URIN HACK
ピンバック: WordPress:ページ切替えしないでコメントを投稿 | Satake Studio Developer's Blog