WordPress Ajax Comments Accepted But Not Updated In Same The Page Without Reload

i am having a problem with my code where i am able to update fields of comments.php form successfully using ajax but i want to display the updated comments directly on the page without reloading the page.

when i am posting a comment it says “thank you for the response” and it accepts the comment but does not update the comment in the same page. When i reload the page , the comment shows perfectly. How do i make the accepted comment appear without reloading the page ?

same happens with reply part … user can reply at the front end and the reply is also accepted successfully but not updated without page reload

how do i update comments on page without page reload

my comments.php

<?php
if ( 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']) )
    die ( 'Please do not load this page directly. Thanks.' );
if ( post_password_required() ) { ?>
    <p class="nocomments">This post is password protected. Enter the password to view comments.</p>
    <?php
    return;
    }
?>

<?php if ( have_comments() ) : ?>

<h3 id="comments"><?php comments_number( 'No Responses', 'One Response', '% Responses' );?> to “<?php the_title(); ?>”</h3>

<ol id="commentlist">
<?php wp_list_comments( 'avatar_size=45' ); ?>
</ol>

<?php if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) : // are there comments to navigate through ?>
<nav id="comment-nav-below">
<h3 class="screen-reader-text"><?php _e( 'Comment navigation', 'blm_basic' ); ?></h3>
<div class="nav-previous"><?php previous_comments_link( __( '&laquo; Older Comments', 'blm_basic' ) ); ?></div>
<div class="nav-next"><?php next_comments_link( __( 'Newer Comments &raquo;', 'blm_basic' ) ); ?></div>
</nav>
<?php endif; // check for comment navigation ?>

 <?php else : // this is displayed if there are no comments so far ?>

 <?php if ( comments_open() ) : ?>
    <!-- If comments are open, but there are no comments. -->

 <?php else : // comments are closed ?>
    <!-- If comments are closed. -->
    <p class="nocomments">Comments are closed.</p>

<?php endif; ?>
<?php endif; ?>

<?php if ( comments_open() ) : ?>

<?php comment_form(); ?>

<?php endif; // if you delete this the sky will fall on your head ?>

the above comments.php successfully accepts comments and then i am making use of this script file in the comments.php

code for script that i write below everything in comments.php

<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 info panel
var list ;
$('a.comment-reply-link').click(function(){
list = $(this).parent().parent().parent().attr('id');
});

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>');
//alert(data);

if($("#commentsbox").has("ol.commentlist").length > 0){
if(list != null){
$('div.rounded').prepend(data);
}
else{
$('ol.commentlist').append(data);
}
}
else{
$("#commentsbox").find('div.post-info').prepend('<ol class="commentlist"> </ol>');
$('ol.commentlist').html(data);
}
}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;
});
});
</script>

After that i write the code mentioned below at the end of functions.php file.

functions.php

add_action('init', 'ajaxcomments_load_js');

function ajaxcomments_load_js() {
//wp_enqueue_script('ajaxcomments',     
get_stylesheet_directory_uri().'js/ajaxcomments.js');

wp_enqueue_script('ajaxcomments', get_template_directory_uri() . "/js/ajaxcomments.js", array('jquery'));
}

function ajaxify_comments_jaya($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);
//print_r( $commentdata);
$permaurl = get_permalink( $post->ID );
$url = str_replace('http://', '/', $permaurl);

if($commentdata['comment_parent'] == 0){
$output = '<li class="comment byuser comment-author-admin bypostauthor odd alt thread-odd thread-alt depth-1" id="comment-' . $commentdata['comment_ID'] . '">
<div id="div-comment-' . $commentdata['comment_ID'] . '" class="comment-body">
<div class="comment-author vcard">'.
get_avatar($commentdata['comment_author_email'])
.'<cite class="fn">' . $commentdata['comment_author'] . '</cite> <span class="says">says:</span>
</div>

<div class="comment-meta commentmetadata"><a href="http://localhost/WordPress_Code/?p=1#comment-'. $commentdata['comment_ID'] .'">' .
get_comment_date( 'F j, Y at g:i a', $commentdata['comment_ID']) .'</a>&nbsp;&nbsp;';
if ( is_user_logged_in() ){
$output .= '<a class="comment-edit-link" href="'. home_url() .'/wp-admin/comment.php?action=editcomment&amp;c='. $commentdata['comment_ID'] .'">
(Edit)</a>';
}
$output .= '</div>
<p>' . $commentdata['comment_content'] . '</p>
<div class="reply">
<a class="comment-reply-link" href="'. $url . '&amp;replytocom='. $commentdata['comment_ID'] .'#respond"
onclick="return addComment.moveForm(&quot;div-comment-'. $commentdata['comment_ID'] .'&quot;, &quot;'. $commentdata['comment_ID'] . '&quot;, &quot;respond&quot;, &quot;1&quot;)">Reply</a>
</div>
</div>
</li>' ;

echo $output;

}
else{

$output = '<ul class="children"> <li class="comment byuser comment-author-admin bypostauthor even depth-2" id="comment-' . $commentdata['comment_ID'] . '">
<div id="div-comment-' . $commentdata['comment_ID'] . '" class="comment-body">
<div class="comment-author vcard">'.
get_avatar($commentdata['comment_author_email'])
.'<cite class="fn">' . $commentdata['comment_author'] . '</cite> <span 
class="says">says:</span> </div>

<div class="comment-meta commentmetadata"><a href="http://localhost/WordPress_Code/?p=1#comment-'. $commentdata['comment_ID'] .'">' .
get_comment_date( 'F j, Y at g:i a', $commentdata['comment_ID']) .'</a>&nbsp;&nbsp;';
if ( is_user_logged_in() ){
$output .= '<a class="comment-edit-link" href="'. home_url() .'/wp-admin/comment.php?action=editcomment&amp;c='. $commentdata['comment_ID'] .'">
(Edit)</a>';
}

$output .= '</div>
<p>' . $commentdata['comment_content'] . '</p>
<div class="reply">
<a class="comment-reply-link" href="'. $url .'&amp;replytocom='. $commentdata['comment_ID'] .'#respond"
onclick="return addComment.moveForm(&quot;div-comment-'. $commentdata['comment_ID'] .'&quot;, &quot;'. $commentdata['comment_ID'] . '&quot;, &quot;respond&quot;, &quot;1&quot;)">Reply</a>
</div>
</div>
</li></ul>' ;

echo $output;
}

$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_jaya', 25, 2);

?>

Read more here: WordPress Ajax Comments Accepted But Not Updated In Same The Page Without Reload

Leave a Reply

Your email address will not be published. Required fields are marked *