How to implement AJAX commenting in WordPress

ajax, javascript, jquery, php, wordpress

Solution

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;
    });
});

Problem

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?

Original source