Ajax comments not working

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.

Related posts

Leave a Reply

1 comment

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