CODEWITHSUNDEEP
ajaxwordpresspagination
Himanshu Jain
Himanshu Jain

Reputation: 444

"Load More Posts" with Ajax in wordpress

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:

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

Upvotes: 1

Views: 5224

Answers (3)

Himanshu Jain
Himanshu Jain

Reputation: 444

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

Upvotes: 1

RRikesh
RRikesh

Reputation: 14381

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:

Upvotes: 0

Dirk-Jan
Dirk-Jan

Reputation: 1149

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);
});

Upvotes: 0

Related Questions