I noticed that when I'm trying to comment too fast in a page it's getting reloaded. I want to avoid reloading the whole page just because someone submits comments too quickly but I don't know where to start.
BTW, here's the ajax script I'm using (I got and later modified it from somewhere around here last time). Since I'm really new on ajax and jQuery, I haven't been able to figure how to avoid the said issue, or if the said issue is in my ajax script. I'm also using underscores theme if that info would be relevant.
function reloadComments() {
jQuery("#comments").load(window.location.href + " #comments > *");
jQuery("#comments > *:not(.comments-title)").hide().fadeIn(1000);
}
jQuery('document').ready(function($) {
var commentform = $('#commentform'); // 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 info panel
var list;
$('a.comment-reply-link').click(function() {
list = $(this).parent().parent().parent().attr('id');
});
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</p>');
},
success: function(data, textStatus) {
if (data == "success" || textStatus == "success") {
statusdiv.html('<p class="ajax-success" >Thanks for your comment. We appreciate your response.</p>');
//alert(data);
reloadComments();
} 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;
});
});