php - lazy load comments wordpress on click

admin管理员组

文章数量:1312694

 <a href="#" id="Link">Click me!</a>
    <div id="lt">The text will get loaded here</div>
  
    <script>
      $("#Link").on("click", function(){
        $("#lt").load("<?php comments_template(); ?>");
      });
    </script>

I asked this code to load the comments after clicking, but it does not work

 <a href="#" id="Link">Click me!</a>
    <div id="lt">The text will get loaded here</div>
  
    <script>
      $("#Link").on("click", function(){
        $("#lt").load("<?php comments_template(); ?>");
      });
    </script>

I asked this code to load the comments after clicking, but it does not work

• php
• javascript

Share Improve this question edited Dec 25, 2020 at 18:39 sa eu asked Dec 21, 2020 at 22:55 sa eusa eu 333 bronze badges 5

• What specifically doesn't work? Do you have any errors in your error log or JavaScript errors in your browser console? What have you done to try and debug the issue? – Howdy_McGee ♦ Commented Dec 21, 2020 at 22:56
• Please do not load this page directly. Thanks! – sa eu Commented Dec 21, 2020 at 23:04
• you are trying to load a template file, but that is not, how its done. the template is for displaying the DATA, so you must load DATA, not template.. you need to tell wordpress, what article is currently present and make it return the related comments. there is many ways to do this. consider calling the REST api. and stop using jquery ;) – honk31 Commented Dec 22, 2020 at 16:29
• How / / @honk31 – sa eu Commented Dec 22, 2020 at 17:04
• @saeu please try to figure this out. i gave you a hint but wont come up with a complete solution. i would, if i had it, but i don't. so what i'm asking you is to try some solutions, then come back here and post your attempts, so we can help you with that.. but below is also an answer, that might work.. and please go to your previous questions and accept the right answers as a solution.. – honk31 Commented Dec 27, 2020 at 8:30

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Templates like the comments template need to be loaded on the page, as it relies on some global variables to know what post to load the comments for, so just pulling in the template with Javascript won't work like that. You'll need to create an AJAX wrapper that sets up the post data before getting the template.

Where you want your comments to go:

<div id="commentsTarget"><a href="#" id="loadComments">Click me!</a></div>

<script>
    jQuery( document ).ready( function() {
        jQuery( '#loadComments' ).click( function( e ) {
            e.preventDefault();
            jQuery.ajax({
                method: 'POST',
                url: '<?php echo esc_url( admin_url( 'admin-ajax.php' ) ); ?>',
                data: {
                    action: 'wpse380230_load_comments',
                    postID: '<?php echo get_the_ID(); ?>'
                },
                success: function( data ) {
                    jQuery( '#commentsTarget' ).html( data );
                }
            });
        });
    });
</script>

In your theme functions.php file:

function wpse380230_load_comments() {
    // Check to make sure the post ID has been sent through.
    if ( isset( $_POST['postID'] ) && ! empty( $_POST['postID'] ) ) {
        // Sanitise the post ID.
        $post_id = absint( wp_unslash( $_POST['postID'] ) );
        // Set up the nessecary global variables.
        global $post, $withcomments;
        $post         = get_post( $post_id );
        $withcomments = true;
        setup_postdata( $post );
        // Time to pull in the template :).
        comments_template();
    }
    wp_die();
}

add_action( 'wp_ajax_wpse380230_load_comments', 'wpse380230_load_comments' );
add_action( 'wp_ajax_nopriv_wpse380230_load_comments', 'wpse380230_load_comments' );

本文标签： phplazy load comments wordpress on click