ajax 経由でワードプレスのコメントを送信するための軽量スクリプトを見つけました。コメントを送信しましたが、コメント数が更新された以外は新しいコメントを表示できません。ページを手動で更新すると、リストされていることがわかります。コードは次のとおりです。
jQuery(document).ready(function($){
jQuery.noConflict();
/* the acp_long is removed here. it got printed in page head by php
acp_lang[]:
[0]: 'Loading...'
[1]: 'Please enter your name.'
[2]: 'Please enter your email address.'
[3]: 'Please enter a valid email address.'
[4]: 'Please enter your comment'
[5]: 'Your comment has been added.'
[6]: 'ACP error!'
*/
// initialise
var form, err, reply;
function acp_initialise() {
jQuery('#commentform').after('<div id="error"></div>');
jQuery('#submit').after('<img src="'+acp_path+'loading.gif" id="loading" alt="'+acp_lang[0]+'" />');
jQuery('#loading').hide();
form = jQuery('#commentform');
err = jQuery('#error');
reply = false;
}
acp_initialise();
jQuery('.comment-reply-link').live('click', function() {
// checks if it's a reply to a comment
reply = jQuery(this).parents('.depth-1').attr('id');
err.empty();
});
jQuery('#cancel-comment-reply-link').live('click', function() {
reply = false;
});
jQuery('#commentform').live('submit', function(evt) {
err.empty();
if(form.find('#author')[0]) {
// if not logged in, validate name and email
if(form.find('#author').val() == '') {
err.html('<span class="error">'+acp_lang[1]+'</span>');
return false;
}
if(form.find('#email').val() == '') {
err.html('<span class="error">'+acp_lang[2]+'</span>');
return false;
}
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if(!filter.test(form.find('#email').val())) {
err.html('<span class="error">'+acp_lang[3]+'</span>');
if (evt.preventDefault) {evt.preventDefault();}
return false;
}
} // end if
if(form.find('#comment').val() == '') {
err.html('<span class="error">'+acp_lang[4]+'</span>');
return false;
}
jQuery(this).ajaxSubmit({
beforeSubmit: function() {
jQuery('#loading').show();
jQuery('#submit').attr('disabled','disabled');
}, // end beforeSubmit
error: function(request){
err.empty();
var data = request.responseText.match(/<p>(.*)<\/p>/);
err.html('<span class="error">'+ data[1] +'</span>');
jQuery('#loading').hide();
jQuery('#submit').removeAttr("disabled");
return false;
}, // end error()
success: function(data) {
try {
// if the comments is a reply, replace the parent comment's div with it
// if not, append the new comment at the bottom
var response = jQuery("<ol>").html(data);
if(reply != false) {
jQuery('#'+reply).replaceWith(response.find('#'+reply));
jQuery('.commentlist').after(response.find('#respond'));
acp_initialise();
} else {//
if (jQuery(document).find('.commentlist')[0]) {
//console.log("find it"); this log line shows it finds the place to append things
response.find('.commentlist li:last')..hide().appendTo(jQuery('.commentlist')).slideDown('slow');
} else {
jQuery('#respond').before(response.find('.commentlist'));
}
if (jQuery(document).find('#comments')[0]) {
jQuery('#comments').html(response.find('#comments'));
} else {
jQuery('.commentlist').before(response.find('#comments'));
}
}
form.find('#comment').val('');
err.html('<span class="success">'+acp_lang[5]+'</span>');
jQuery('#submit').removeAttr("disabled");
jQuery('#loading').hide();
} catch (e) {
jQuery('#loading').hide();
jQuery('#submit').removeAttr("disabled");
alert(acp_lang[6]+'\n\n'+e);
} // end try
} // end success()
}); // end ajaxSubmit()
return false;
}); // end form.submit()
}); // end document.ready()
上記のコードに何らかのヒントがあると、新しいコメントが表示されないことがありますか?
アップデート：
チャットルームで HMR の助けを借りて、firebug でテストを行いました。結果は次のとおりです。
response.find('.commentlist li:last')
Does find the just posed reply and that
jQuery('.commentlist')
Does refer to an existing, visible div element on the page but adding the comment to the div using:
response.find('.commentlist li:last').appendTo(jQuery('.commentlist'));
Doesn't make the newly added comment show up.
HMRに感謝しますが、タイプミスがあり、ファイルをきれいにするのに時間が必要だったので. 私たちのテストは停止しました。
その「.commentlist」要素に含まれるhtmlを投稿すると、追加が機能しないのはなぜですか。空の場合に機能することはすでに証明されているため、新しく追加されたコメントを表示しない html が含まれています。