Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

share|improve this question
add comment

1 Answer

up vote 3 down vote accepted
<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>
share|improve this answer
    
Can you provide any explanation? There are no comments in your code, nor any sort of indication why this is an answer. Thanks! –  Brian Fegter Sep 29 '12 at 5:09
    
@Brian Fegter: hi, i have work today. i will provide u explanation by monday. –  ThulasiRam Sep 29 '12 at 6:40
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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