Ajax loading duplicate post

1 comment

1. You have got a few things to consider here.

   Let’s start the way the Browser does.

   You build up the HTML, so far so good, containing the Structure and everything for your site. No articles are shown.

   The next step your Browser has to do is make the AJAX call.

   Here are the first things to be considered. In your document.ready function you do not send the offset of posts to your AJAX-php function. As far as I can tell from your code, you always want to show 5 posts when the function is called.

   Therefore, consider this:

   At first, the count is 0. With every successful Reload the count increases by 5. You should place this part into the success part of your AJAX call. Also, your AJAX-php function has to know the offset of the posts to be delivered.

   Another thing to consider is, that you may have another query on your Site than the one in your AJAX-function. So be sure the var total is the correct number, but I won’t go into this any further by now and leave it like you had it. You get the idea.

   Your Javascript should be like this:

   jQuery(document).ready(function($) {
       var count = 0;
       var total = <?php echo $wp_query->max_num_pages; ?>;
       $(window).scroll(function(){
               if ($(window).scrollTop() == $(document).height() - $(window).height()){
                  if (count > total){
                       return false;
                  }else{
                       loadArticle(count);
                  }
               }
       }); 
   
       function loadArticle(count){    
               $('a#inifiniteLoader').show('fast');
               // I prefer doing the ajaxdata with an array
               var ajaxdata = { 
                  'action' : 'infinite_scroll'
                  'offset' : count
               }
               $.ajax({
                   url: "<?php bloginfo('wpurl') ?>/wp-admin/admin-ajax.php",
                   type:'POST',
                   data: ajaxdata, 
                   success: function(html){
                       $('a#inifiniteLoader').hide('1000');
                       $("#content").append(html);    // This will be the div where our content will be loaded
                           count = count + 5; // Increase the number of posts that are already shown.
                   }
               });
           return false;
       }
   });
   

   As you can see, I created an Array for the ajaxdata – it is easier to take a look at it this way. I also removed the loopfile=loop, as you can see later, because I would do the response in another way.

   So far so good – now we should consider building your AJAX response a little different. You registered it the right way, but i would handle it not with the get_template_part, do another function, passing the variables.

   The registering of the AJAX function would be like this:

   add_action('wp_ajax_infinite_scroll', 'wp_infinitepaginate');           // for logged in user
   add_action('wp_ajax_nopriv_infinite_scroll', 'wp_infinitepaginate');    // if user not logged in
   
   function wp_infinitepaginate(){
       load_ajax_results($_POST['count']);
       exit;
   }
   

   The last step is the actual function to put together your output. You can place this one anywhere, your functions.php or another file. I prefer creating a file ajax-functions.php which is included in my functions.php, containing all the above functions (except the Javascript of course)

   <?php
   
       function load_ajax_results( $offset ) {
       // I use the $_POST['count'] as $offset here
   ?>
   
       <div class="post-left">
       <?php
           $args = array(
               'numberposts' => '2', // 2 Posts to show here
               'offset'      => $offset // the number of Posts to skip, given by the AJAX call
           );
           query_posts( $args ); // nothing else should be needed
   
           if (have_posts()) : while (have_posts()) : the_post();
           ?>
               <div class="images-grid-page-wrapper">
                   <?php the_title(); ?>
               </div>
           <?php endwhile; endif; // End the loop. Whew. ?>
           <?php wp_reset_query(); // reset it ?>
       </div>
   
   
       <div class="post-mid">
       <?php 
           $offset = $offset + 2; // because we had 2 Posts before
           $args = array(
               'numberposts' => '3', // 3 Posts to show here
               'offset'      => $offset // the number of Posts to skip, given by the AJAX call
           );
           query_posts( $args ); // nothing else should be needed
   
           if (have_posts()) : while (have_posts()) : the_post();
           ?>
               <div class="images-grid-page-wrapper">
                   <?php the_title(); ?>
               </div>
           <?php endwhile; endif; // End the loop. Whew. ?>
       </div>
   
   <?php
   
       }
   
   ?>
   

   As I use the offset here, I do not have to check if any of the Posts has already been shown before.

   The main Problem you had is that you had an error thinking about the AJAX function. This function does not know anything about what is going on in the Browser, so you have to tell it which Posts to show. It is a new instance everytime it is called – and so the Values, which posts have been delivered the last time, are not stored.

   Did not test this on my installation, but I hop you get the idea behind it. If there are any errors, sorry, and if there are any questions, please comment 🙂

   Log in to Reply