Upload response comment with AJAX without refreshing the page

0

I am sending comments with AJAX and then loading it into the reply, it works fine except that the response link is not being rendered on the page, after clicking on post reply the page is being updated and returning the reply, but the right thing would be for the page not to update and post the response.

  

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>
    
asked by anonymous 13.12.2018 / 01:35

1 answer

1

What you can do is update only the <div> that is loading 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

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

    
13.12.2018 / 11:17