4

I'm trying to 'ajaxify' commenting in WordPress using this tutorial Ajaxify WordPress Comments

Here is my PHP handler:

function ajaxify_comments( $comment_ID, $comment_status ){
    if( ! empty( $_SERVER['HTTP_X_REQUESTED_WITH'] ) && strtolower( $_SERVER['HTTP_X_REQUESTED_WITH'] ) == 'xmlhttprequest' ) {
        //If AJAX Request Then
        switch( $comment_status ) {
            case '0':
                //notify moderator of unapproved comment
                wp_notify_moderator( $comment_ID );
            case '1': //Approved comment
                echo "success";
                $commentdata = &get_comment( $comment_ID, ARRAY_A );
                $post = &get_post( $commentdata['comment_post_ID'] );
                wp_notify_postauthor( $comment_ID, $commentdata['comment_type'] );
                break;
            default:
                echo "error";
        }
        exit;
    }
}
add_action( 'comment_post', 'ajaxify_comments', 20, 2 );

And here is my script:

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 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</p>');
                                },
            success: function(data, textStatus){
                if(data=="success")
                    statusdiv.html('<p class="ajax-success" >Thanks for your comment. We appreciate your response.</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;
        });
});

Every time I post a comment, I get: "Please wait a while before posting your next comment". Hoping somebody can tell me what I'm doing wrong?

5
  • Whats the value of data and textStatus when you try it? Put some console.log(data); console.log(textStatus); inside the success. Commented Feb 24, 2014 at 12:55
  • Just done that... The value of both console.log(data); and console.log(textStatus); is success Commented Feb 24, 2014 at 13:05
  • If so, it should go for the "Thanks for your comment. We appreciate your response." message! Do you see the comment in the database? Commented Feb 24, 2014 at 13:09
  • Yes! The comment is in the database. I agree, I should be seeing the "Thanks for your comment. We appreciate your response." message but for some reason I'm not. That's the problem... it's puzzling me Commented Feb 24, 2014 at 13:13
  • what is formurl? what should it be? the tutorial doesn't explain Commented Apr 15, 2018 at 13:13

1 Answer 1

5

Try this:

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 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</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>');
                }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;
    });
});
Sign up to request clarification or add additional context in comments.

6 Comments

Great! I'm now getting: "Thanks for your comment. We appreciate your response". Also, I can see comment is in the database but the problem is the comment text isn't displayed on screen until I do a manual page refresh
@gonzalo-naveira you are supposed to also give an explanation, not only copy/paste + edit the code. This website is supposed to teach/learn from one another, is not a "who's gonna do my homework?" website.
@Dragos we've already been discussing in comments. Please see above.
@henrywright are your comments displayed automatically? Or do they need to be moderated first?
@henrywright you should add the comment to the DOM in the success!
|

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.