<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>