Add Ajax loaded posts to existing posts

Question

I manage to get the Ajax loading to load wordpress post. But my problem is when I click the next posts button it replaces the previous post with new posts. But I want to display next set of post below the posts that are already displayed but not replace them.

Till now.

<div id="content">
<div id="contentInner">
<ul class="list-group">
<!-- the loop -->
<?php if ( have_posts() ) : while (have_posts()) : the_post(); ?>
<!-- the title, the content etc.. -->
<?php get_template_part( 'content', get_post_format() );?>
<?php endwhile; ?>
<!-- pagination -->
<ul id='Pagination'>
  <li>< ?php next_posts_link('NEXT &raquo;') ?></li>
</ul>
<?php else : ?>
<!-- No posts found -->
<?php get_template_part( 'content', 'none' );
endif; ?>
</ul>
</div> 
</div> 

And the script.

<script type="text/javascript">
jQuery(document).ready(function(){
jQuery(document).on('click','#Pagination a', function(e){
e.preventDefault();
var link = jQuery(this).attr('href');
jQuery('#content').html('Loading...');
jQuery('#content').load(link+' #contentInner');
});
});</script>

Answer 1

The jQuery .html and .load() is replacing the entire content.

First, move your #Pagination outside of the ul.list-group. You will want this to continue to remain at the bottom of the list.

Next, you will need to reconfigure your jQuery ajax to load the posts differently. You should load the posts from the next page, and append them to the list.

Untested, but something along these lines should work.

jQuery('#Pagination a').on('click', function(e) {
    e.preventDefault();
    var link = jQuery(this).attr('href');
    var loading = jQuery('Loading');
    jQuery('.list-group').append(loading);
    $.ajax({
        url: link,
        success: function(data) {
            var newPosts = data.find('#contentInner .list-group').html();
            $('#contentInner .list-group').append(newPosts);
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log(textStatus);
            console.log(errorThrown);
            $('#loading').text("Error loading posts");
        }
    });
});

You might also consider changing the way the pagination works. Is it number pagination? or just Prev/Next?

You can change the href on your pagination links by using the data.find in the success function to grab the href of the paginations on that page. Either way, this seems like it is going to present some UX problems once you get it working and start playing with it.