I followed a tutorial to ‘ajaxify’ wordpress comments where it does not reload the page:
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;
});
});
});
.. it works, but just for the first #commentform it finds. On my homepage, several posts are displayed and each has a #commentform enabled. I tried .each as you can see but it doesn’t seem to have any effect.
1 comment