Post loaded with ajax in wordpress repeated

Question

Post loaded with ajax in wordpress repeated

Navigation

#1 by (0 votes)

0

I have a post page on my site, it shows all posts created in wordpress, however they are many post, so I put an application that only shows 5 posts in the page, and clicking the button created, 5 more post, however, some post comes repeated. I wonder why the posts are coming back.

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>

Thanks for the help!

php javascript wordpress

asked by anonymous 26.10.2018 / 20:29

1 answer

Problem in connecting DB manager on Ubuntu 18 machine with SQL Server (cloud) Scroll hides Bootstrap Popover

score 0 · Answer 1

You need to pass offset on the arguments so you can get the posts from the amount you've already loaded.

Initially you will pass the value 0, and each time you fetch the posts, you will have to pass a value to the offset 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: link

I do not know how you are calling this function exactly, but the idea is for you to always store the number of posts for each request. I hope I could have helped you!