Post loaded with ajax in repeated wordpress

Question

I have a post page on my site, in it are shown all the posts created in wordpress, however are many post, so I put an application that shows only 5 post on the page, and when you click the button created, are pulled over 5 post, however, some post comes repeated. I wonder why the posts are coming repeated.

Functions.php

<?php 

    add_action('wp_ajax_load_posts_by_ajax', 'load_posts_by_ajax_callback');
    add_action('wp_ajax_nopriv_load_posts_by_ajax', 'load_posts_by_ajax_callback');

    function load_posts_by_ajax_callback() {
    check_ajax_referer('load_more_posts', 'security');
    $paged = $_POST['page'];
    $args = array(
        'post_type'     => 'post', 
        'status'        => 'published', 
        'cat' => 3,
        'order' => 'ASC',
        'posts_per_page' => '2',
        'paged' => $paged,
    );

    $my_posts = new WP_Query( $args );
    if ( $my_posts->have_posts() ) :
        ?>
        <?php while ( $my_posts->have_posts() ) : $my_posts->the_post() ?>
           <div class="col-md-12 glossario">
              <h2 class="tituloGlossario"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
              <a href="<?php the_permalink(); ?>" style="color:#fff;"><p class="textoGlossario"><?php echo wp_trim_words( get_the_content(), 20, '...' ); ?></p></a>
          </div>
        <?php endwhile ?>
        <?php
    endif;

    wp_die();
    }
?>

Post page:

<?php 
              $args = array(
                  'post_type'     => 'post', 
                  'status'        => 'published', 
                  'cat' => 3,
                  'order' => 'ASC',
                  'posts_per_page' => '2',
                  'paged' => 1,
              );
              $my_posts = new WP_Query( $args );
              if ( $my_posts->have_posts() ) : 
              ?>
                  <div class="my-posts">
                      <?php while ( $my_posts->have_posts() ) : $my_posts->the_post() ?>
                          <div class="col-md-12 glossario">
                          <h2 class="tituloGlossario"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                          <a href="<?php the_permalink(); ?>" style="color:#fff;"><p class="textoGlossario"><?php echo wp_trim_words( get_the_content(), 20, '...' ); ?></p></a>
                      </div>
                      <?php endwhile ?>
                  </div>
              <?php endif ?>
              <div class="loadmore">Load More...</div>

Script:

<script>
            var ajaxurl = "<?php echo admin_url( 'admin-ajax.php' ); ?>";
            var page = 2;
            jQuery(function($) {
                $('body').on('click', '.loadmore', function() {
                    var data = {
                        'action': 'load_posts_by_ajax',
                        'page': page,
                        'security': '<?php echo wp_create_nonce("load_more_posts"); ?>'
                    };

                    $.post(ajaxurl, data, function(response) {
                        $('.my-posts').append(response);
                        page++;
                    });
                });
            });
        </script> 

Grateful for the help!

Answer 1

You need to pass the offset in the arguments to be able to pick up the posts from the amount you have already loaded.

Initially you will pass the value 0, and each time you search for the posts, you will have to pass an offset value that is the amount of posts you have already loaded.

Function.php

$paged = $_POST['page'];
$postsLength = ($_POST['postsLength'] > 0) ? $_POST['postsLength'] : 0;
$args = array(
    'post_type'     => 'post', 
    'status'        => 'published', 
    'cat' => 3,
    'order' => 'ASC',
    'posts_per_page' => '2',
    'paged' => $paged,
    'offset' => $postsLength
);

Script:

<script>
            var ajaxurl = "<?php echo admin_url( 'admin-ajax.php' ); ?>";
            var page = 2;
            var postsLength = 0;
            jQuery(function($) {
                $('body').on('click', '.loadmore', function() {
                    var data = {
                        'action': 'load_posts_by_ajax',
                        'page': page,
                        'postsLength': postsLength,
                        'security': '<?php echo wp_create_nonce("load_more_posts"); ?>'
                    };

                    $.post(ajaxurl, data, function(response) {
                        $('.my-posts').append(response);
                        postsLength += response.length;
                        page++;
                    });
                });
            });
        </script> 

You can see about offset here in the documentation: https://codex.wordpress.org/Class_Reference/WP_Query

I don’t know how you’re calling this function exactly, but the idea is you always store the amount of posts with each request. I hope I could have helped!