I’m trying to get AJAX commenting working in WordPress. So far I have written a PHP handler and a script.

My script (modified from here):

jQuery(document).ready(function($){

var commentform = $(‘#commentform’);
commentform.prepend(”);
var statusdiv = $(‘#comment-status’);

commentform.submit(function(){
//serialize and store form data in a variable
var data=commentform.serialize();
//Add a status message
statusdiv.html(‘Processing…’);
//Extract action URL from commentform
var formurl=commentform.attr(‘action’);
//Post Form with data
$.ajax({
type: ‘POST’,
url: formurl,
dataType: ‘JSON’,
data: data,
error: function(XMLHttpRequest, errorThrown)
{
statusdiv.html(‘Oops, an error occured’);
},
success: function(data)
{
statusdiv.html(data);
$(‘#commentform #comment’).val(”);
}
});
return false;
});
});

My PHP handler:

function ajaxify_comments( $comment_ID, $comment_status ) {

$comment = get_comment( $comment_ID );

$response = $comment->comment_content;
echo json_encode( $response );

die();
}
add_action( ‘comment_post’, ‘ajaxify_comments’, 20, 2 );

My PHP handler, ajaxify_comments(), is hooked to comment_post which fires immediately after the comment is saved to the database. The function gets the comment text and returns a response (the comment text) to my AJAX script. If everything is successful, the comment text is displayed on screen. If unsuccessful, an error message is displayed.

My problem

If I submit a comment, the comment is saved to the database and the comment text is displayed on screen. This bit works! My problem is if I make a second comment without refreshing the page - I always get “Oops, an error occurred”. What am I doing wrong?

Update

After @adeneo’s suggestion to use the WordPress built in AJAX hooks I have come up with a new script and PHP handler…

Script:

jQuery(document).ready(function($) {

var path = ac.path;
var security = ac.security;
var ajax_url = ac.ajax_url;

var commentform = $(‘#commentform’);
commentform.prepend(”);
var statusdiv = $(‘#comment-status’);

commentform.submit(function(){

$.ajax({
type: ‘POST’,
url: ajax_url,
dataType: ‘JSON’,
data: {
‘action': ‘ac’,
‘security': security
},
success:function(data) {
statusdiv.html(data);
$(‘#commentform #comment’).val(”);
},
error: function(data){
statusdiv.html(‘Oops, an AJAX error occured’);
}
});
return false;

});
});

PHP handler

function ajaxify_comments() {

check_ajax_referer( ‘ajax_ac_nonce’, ‘security’ );

$response = ‘blah';
echo json_encode( $response );

die();
}
add_action( ‘wp_ajax_ac’, ‘ajaxify_comments’ );

For completeness it is worth letting you know that I also have:

wp_enqueue_script( ‘ac-script’, plugins_url( ‘/js/script.js’, __FILE__ ), array( ‘jquery’ ), 1.0, true );
$path = get_bloginfo( ‘stylesheet_directory’ );

// set the nonce security check
$ajax_nonce = wp_create_nonce( ‘ajax_ac_nonce’ );

wp_localize_script(
‘ac-script’,
‘ac’,
array(
‘ajax_url’ => admin_url( ‘admin-ajax.php’ ),
‘path’ => $path,
‘security’ => $ajax_nonce,
)
);

My question now becomes: How do I make the submitted comment data available to my PHP handler? I guessing I’ll need to manually save the comment data to the database? I need this data available in my PHP function first but not sure how to do that?

Read more here: AJAX commenting in WordPress


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: