0

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>
0

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.

  • I put #Pagination outside of the ul.list-group and replaced the code with your code but did not work. Above I used Prev/Next pagination but I have also implemented github.com/talentedaamer/Bootstrap-wordpress-pagination. – Lifestohack Apr 6 '15 at 14:27
  • What happened? What errors were logged? What actions on the page happened? – JoshuaDoshua Apr 6 '15 at 17:30
  • Nothing happens. No error is logged. It just does nothing. – Lifestohack Apr 9 '15 at 9:54
  • include a console.log('clicked'); right after e.preventDefault(); and check to make sure the listener is working correctly. If it is, use the network panel in your inspector to make sure the page is actually requesting something – JoshuaDoshua Apr 13 '15 at 12:29
  • TypeError: data.find is not a function. So I changed it to $data.find(...) and I don't get any log on console. – Lifestohack Apr 15 '15 at 20:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.