Load reply comment with AJAX without refreshing page

Question

I am sending comments with AJAX and then loading it in the reply, works well, except that the reply link is not being processed on the page, after you click to publish reply the page is being updated and returning the reply, but the right page would not update and publish the reply.

functions.php

# COMENTÁRIOS AJAX
function your_theme_slug_comments($comment, $args, $depth) {
    $GLOBALS['comment'] = $comment;
    if ( 'div' === $args['style'] ) {
        $tag       = 'div';
        $add_below = 'comment';
    } else {
        $tag       = 'li';
        $add_below = 'comment';
    } ?>
    <li <?php comment_class(); ?> <?php echo $tag; ?> id="comment-<?php comment_ID(); ?>">

        <div class="comment-wrap">
            <div class="comment-img">
                <?php get_avatar($comment,$args['avatar_size'],null,null,array('class' => array('img-responsive', 'img-circle') )); ?>
            </div>
            <div class="comment-body">
                <h4 class="comment-author"><?php echo get_comment_author_link(); ?></h4>
                <span class="comment-date"><?php printf(__('%1$s at %2$s'), get_comment_date(),  get_comment_time()) ?></span>
                <?php if ($comment->comment_approved == '0') { ?><em><i class="fa fa-spinner fa-spin" aria-hidden="true"></i> <?php _e('Comentário aguardando aprovação'); ?></em><br /><?php } ?>
                <?php comment_text(); ?>
                <span class="comment-reply"><?php comment_reply_link( array_merge( $args, array('reply_text' => 'Responder', 'depth' => $depth, 'max_depth'  => $args['max_depth']))); ?></span>
            </div>
        </div>
    </li>
    <?php
}

comments.php

<?php if ( post_password_required() ) { return; } ?>
<div id="comments" class="comments-area">
    <?php if ( have_comments() ) { ?>
        <ol class="comment-list">
            <?php wp_list_comments( array( 'avatar_size' => 70, 'style' => 'ul', 'callback' => 'your_theme_slug_comments', 'type' => 'all' ) ); ?>
        </ol>
        <?php the_comments_pagination( array( 'prev_text' => '<i class="fa fa-angle-left" aria-hidden="true"></i> <span class="screen-reader-text">' . __( 'Previous') . '</span>', 'next_text' => '<span class="screen-reader-text">' . __( 'Next') . '</span> <i class="fa fa-angle-right" aria-hidden="true"></i>', ) ); ?>
    <?php } ?>
    <?php if ( ! comments_open() && get_comments_number() && post_type_supports( get_post_type(), 'comments' ) ) { ?>
        <p class="no-comments"><?php _e( 'Os comentários estão fechados.'); ?></p>
    <?php } ?>
    <?php comment_form(); ?>
</div>

Answer 1

What you can do is update only the <div> that is loading the comments, inserting the same html and pulling php.

The code for this in Jquery is:

$(function() { setTime(); function setTime() { var date = new Date().getTime(); var string = "Timestamp: "+date; setTimeout(setTime, 3000); $('#comments').html(some.code.php); } });

Source

Since in this function above the time is 3000 milliseconds, or three seconds, you can manipulate the time.