AJAX Load More returning random duplicates
-
Hello! I am having a strange issue I have not run into before with AJAX filtering. I am developing a site to replace a local magazine’s site, and part of that is bringing over the 90,000+ submissions they have. So I have an ajax filtering function for browsing — a simple click on the category and we will show the most recent posts in that category.
However, the query returns duplicates of posts –and at random too. I could click load more twice, and the query all of a sudden returning a duplicate of the third post from the very top. There are no duplicates in the backend (I’ve looked). Because of the random nature of the duplications, I can’t figure out why it is happening.
My original Query is the following. The top is the query + arguments, then it goes through the loop, grabs the variables, and outputs them:
<?php $dQuery = new WP_Query([ 'post_type' => 'submission', 'posts_per_page' => 12, 'status' => 'publish', 'orderby' => 'date', 'order' => 'DESC', 'paged' => 1 ]); if($dQuery->have_posts()) { ?> <div class="sfs-submissions-container"> <?php while($dQuery->have_posts()) : $dQuery->the_post(); // Get single post meta data $post_id = get_the_ID(); $post_meta = get_post_meta($post_id); // Get author data $post_author = get_the_author(); $post_author_id = get_post_field ('post_author', $post_id); // Get post information data $post_title = get_the_title(); $post_excerpt = get_the_excerpt(); $post_link = get_the_permalink(); $post_views = gt_get_post_view(); $post_location = get_field("location", $post_id); $post_image_data = wp_get_attachment_image_src(get_post_thumbnail_id($post_id), $size="full"); if(get_post_meta($post_id, '_oacs_spl_post_like_count')): $post_likes = get_post_meta($post_id, '_oacs_spl_post_like_count')[0]; else: $post_likes = 0; endif; ?> <div class="sfssc-card"> <a class="submission-link-wide" href="<?php echo $post_link;?>"> <div class="sub-bg-image" style="background-image: url(<?php echo $post_image_data[0];?>)"> <div class="reader-submission-overlay"> <div class="top"> <span class="post-title"><?php echo $post_title;?></span> </div> <div class="middle"> <span class="post-author"><?php echo $post_author;?></span> </div> <div class="bottom"> <span class="post-location"> <?php echo $post_location;?> </span> <div class="views-and-likes"> <span class="views-text"><?php echo $post_views;?> Views</span> <span class="views-divider">|</span> <span class="likes-text"> <?php if($post_likes): ?> <?php echo $post_likes . " Likes";?> <?php else: ?> <?php echo "0 Likes";?> <?php endif; ?> </span> </div> </div> </div> </div> </a> </div> <?php endwhile; ?> </div> <?php } ?>At the bottom of the page there is a load more button that triggers the Javascript file with the corresponding code:
//DEFAULT ARTICLE LOAD MORE subNew = 1; $('#fsf-load-more-button').on('click', function() { subNew++; console.log(subNew); $.ajax({ type: 'POST', url: ajax_url, dataType: 'json', data: { action: 'subs_load_more', paged: subNew, }, success: function (res) { if(subNew >= res.max) { $('#fsf-load-more-button').hide(); } $('.sfs-submissions-container').append(res.html); } }); });subNew is “paged”, and I can see with every click of the button, it increments correctly. This Javascript passes data to the following php file, and then brings it back to be outputted on the original page.
The function that runs the ajax query is:
/** * DEFAULT LOAD MORE FOR ARTICLES ARCHIVE */ function subs_load_more() { remove_all_actions('pre_get_posts'); wp_reset_query(); wp_reset_postdata(); $ajax_subs = new WP_Query([ 'post_type' => 'submission', 'posts_per_page' => 12, 'status' => 'publish', 'orderby' => 'date', 'order' => 'DESC', 'paged' => $_POST['paged'], 'suppress_filters' => true, ]); $response = ''; $max_pages = $ajax_subs->max_num_pages; if($ajax_subs->have_posts()) { while($ajax_subs->have_posts()) : $ajax_subs->the_post(); $post_id = get_the_ID(); $post_meta = get_post_meta($post_id); // Get author data $post_author = get_the_author(); $post_author_id = get_post_field ('post_author', $post_id); // Get post information data $post_title = get_the_title(); $post_excerpt = get_the_excerpt(); $post_link = get_the_permalink(); $post_views = gt_get_post_view(); $post_location = get_field("location", $post_id); $post_image_data = wp_get_attachment_image_src(get_post_thumbnail_id($post_id), $size="full"); if(get_post_meta($post_id, '_oacs_spl_post_like_count')): $post_likes = get_post_meta($post_id, '_oacs_spl_post_like_count')[0]; else: $post_likes = 0; endif; $response .= '<div class="sfssc-card"> <a class="submission-link-wide" href="' . $post_link . '"> <div class="sub-bg-image" style="background-image: url(' . $post_image_data[0] . ')"> <div class="reader-submission-overlay"> <div class="top"> <span class="post-title">' . $post_title . '</span> </div> <div class="middle"> <span class="post-author">' . $post_author . '</span> </div> <div class="bottom"> <span class="post-location">' . $post_location . '</span> <div class="views-and-likes"> <span class="views-text">' . $post_views . ' Views</span> <span class="views-divider">|</span> <span class="likes-text">'; $response .= ($post_likes) ? $post_likes . " Likes" : "0 Likes"; $response .= '</span> </div> </div> </div> </div> </a> </div>'; endwhile; } $result = [ 'max' => $max_pages, 'html' => $response ]; echo json_encode($result); exit; } add_action('wp_ajax_subs_load_more', 'subs_load_more'); add_action('wp_ajax_nopriv_subs_load_more', 'subs_load_more');This file runs the ajax query which is nearly identical to the previous query, only it starts with “paged” => 2 because of the variable incrementation from the javascript. Other than that, I cannot see a difference and as to why the duplications would happen.
As you see, I have resets and remove filters to try and get rid of the duplications, but none of it worked.
Has anyone encountered this problem before? And as you see, I have linked the page so you can see just how random the duplication is. It is not every post, and the order makes no sense.
The page I need help with: [log in to see the link]
- The topic ‘AJAX Load More returning random duplicates’ is closed to new replies.