1

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

3
<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>
2
  • Can you provide any explanation? There are no comments in your code, nor any sort of indication why this is an answer. Thanks! Sep 29, 2012 at 5:09
  • @Brian Fegter: hi, i have work today. i will provide u explanation by monday.
    – Thulasiram
    Sep 29, 2012 at 6:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.