“Load More Posts” with Ajax in wordpress

4 Views

I am trying to create ajax pagination on Blog Page..
What I need to do is to display 5 posts initially and then load 5 more when “load more posts” link is clicked.

Below is the javascript I am using:

Read More
<script>
    jQuery(document).ready(function() {
        // ajax pagination
        jQuery('.nextPage a').live('click', function() { 

            // if not using wp_pagination, change this to correct ID
            var link = jQuery(this).attr('href');

            // #main is the ID of the outer div wrapping your posts
            jQuery('.blogPostsWrapper').html('<div><h2>Loading...</h2></div>');

            // #entries is the ID of the inner div wrapping your posts
            jQuery('.blogPostsWrapper').load(link+' .post')
        });
    }); // end ready function
</script>

The problem is that when I click the link the old posts get replaced by the new ones, I need to show old posts as well as the new posts…

Here is the Updated jQuery Code which enables the ajax pagination. 

jQuery(document).ready(function(){
jQuery('.nextPage a').live('click', function(e){
  e.preventDefault();
  var link = jQuery(this).attr('href');
  jQuery('.blogPostsWrapper').html('Loading...');
  jQuery('.blogPostsWrapper').load(link+' .post');
  });
  });

The only problem now is the old posts get removed, i need to keep both old and new posts..

Post Views: 4

Related posts

Leave a Reply

3 comments

  1. Here is the final code I used and now everything works perfectly…

    // Ajax Pagination
jQuery(document).ready(function($){
    $('.nextPage a').live('click', function(e)  {
    e.preventDefault();
    $('.blogPostsWrapper').append("<div class="loader">&nbsp;</div>");

    var link = jQuery(this).attr('href');

    var $content = '.blogPostsWrapper';
    var $nav_wrap = '.blogPaging';
    var $anchor = '.blogPaging .nextPage a';
    var $next_href = $($anchor).attr('href'); // Get URL for the next set of posts

    $.get(link+'', function(data){
    var $timestamp = new Date().getTime();
    var $new_content = $($content, data).wrapInner('').html(); // Grab just the content
    $('.blogPostsWrapper .loader').remove();
    $next_href = $($anchor, data).attr('href'); // Get the new href
    $($nav_wrap).before($new_content); // Append the new content
    $('#rtz-' + $timestamp).hide().fadeIn('slow'); // Animate load
    $('.netxPage a').attr('href', $next_href); // Change the next URL
    $('.blogPostsWrapper .blogPaging:last').remove(); // Remove the original navigation
    });

    });
}); // end ready function

  2. Could you maybe try the following code? This is how I got this working on my own site.

    replace:

    jQuery('.blogPostsWrapper').load(link+' .post')

    with:

    $.get(link+' .post', function(data){
$('.blogPostsWrapper').append(data);
});

  3. You should use jQuery append() to add the new posts without using the old ones.

    jQuery load() Will replace the data found in your element . Quoted from jQuery API:

    .load() sets the HTML contents of the matched element to the returned
    data. This means that most uses of the method can be quite simple: