我遵循了“ajaxify”wordpress评论的教程,其中不会重新加载页面:
jQuery(\'document\').ready(function ($) {
$(\'#commentform\').each(function () {
var commentform = $(this); // find the comment form
commentform.prepend(\'<div id="comment-status" ></div>\'); // add info panel before the form to provide feedback or errors
var statusdiv = $(\'#comment-status\'); // define the infopanel
commentform.submit(function () {
//serialize and store form data in a variable
var formdata = commentform.serialize();
//Add a status message
statusdiv.html(\'<p>Processing...</p>\');
//Extract action URL from commentform
var formurl = commentform.attr(\'action\');
//Post Form with data
$.ajax({
type: \'post\',
url: formurl,
data: formdata,
error: function (XMLHttpRequest, textStatus, errorThrown) {
statusdiv.html(\'<p class="ajax-error" >You might have left one of the fields blank, or be posting too quickly or your comment was too short.</p>\');
},
success: function (data, textStatus) {
if (data == "success") statusdiv.html(\'<p class="ajax-success" >Thanks for your comment. Refresh the page to see it.</p>\');
else statusdiv.html(\'<p class="ajax-error" >Please wait a while before posting your next comment</p>\');
commentform.find(\'textarea[name=comment]\').val(\'\');
}
});
return false;
});
});
});
。。它可以工作,但只适用于它找到的第一个#commentform。在我的主页上,显示了几个帖子,每个帖子都启用了#commentform。我试过了。正如你所看到的那样,每一种都没有任何效果。
最合适的回答,由SO网友:Thulasiram 整理而成
<div>
<div class="CommentList"></div>
<form action="" class="commentForm">
<textarea name="comment"></textarea>
<input type="button" value="Comment" class="btnComment" />
</form>
</div>
<div>
<div class="CommentList"></div>
<form action="" class="commentForm">
<textarea name="comment"></textarea>
<input type="button" value="Comment" class="btnComment" />
</form>
</div>
<script type="text/javascript">
$(document).ready(function () {
$(\'.commentForm\').each(function () {
$(this).prepend(\'<div class="comment-status"></div>\');
});
$(\'.commentForm\').find(\'.btnComment:button:not(.Process)\').live(\'click\', function () {
$(this).addClass(\'Process\').attr(\'disabled\', true);
var commentFormObj = $(this).parents(\'form.commentForm\');
commentFormObj.find(\'textarea[name=comment]\').val(\'\');
var statusDivObj = $(this).find(\'.comment-status\');
statusDivObj.html(\'<p>Processing...</p>\');
$.ajax({
url: commentFormObj.attr(\'action\'), type: \'Post\', dataType: \'json\',
data: commentFormObj.serialize(),
error: function (XMLHttpRequest, textStatus, errorThrown) {
statusDivObj.html(\'<p class="ajax-error" >You might have left one of the fields blank, or be posting too quickly or your comment was too short.</p>\');
},
success: function (data, textStatus) {
if (data == "success")
statusDivObj.html(\'<p class="ajax-success" >Thanks for your comment. Refresh the page to see it.</p>\');
commentFormObj.find(\'.btnComment:button\').removeClass(\'.Process\').attr(\'disabled\', false);
}
});
});
});
</script>