Simple Wordpress AJAX pagination

Question

I'm using the loop + jQuery below to load in the next set of pages, and it works on the first click, but when the next page is loaded in and I click on "newer posts" it reloads the whole page. Any ideas?

<div id="content">
    <?php
$new_query = new WP_Query();
$new_query->query('post_type=post&showposts=1'.'&paged='.$paged);
?>

<?php while ($new_query->have_posts()) : $new_query->the_post(); ?>
<?php the_title(); ?>

<?php endwhile; ?>
    <div id="pagination">
    <?php next_posts_link('&laquo; Older Entries', $new_query->max_num_pages) ?>
    <?php previous_posts_link('Newer Entries &raquo;') ?>
    </div>
</div><!-- #content -->

<script>
$('#pagination a').on('click', function(event){
event.preventDefault();
var link = $(this).attr('href'); //Get the href attribute
$('#content').fadeOut(500, function(){ });//fade out the content area
$('#content').load(link + ' #content', function() { });
$('#content').fadeIn(500, function(){ });//fade in the content area

});
</script>

Solution 1

You're using jQuery's load() method to insert content, which is a shortcut for $.ajax, which of course inserts the content dynamically.

Dynamic content requires delegation of the events to a non-dynamic parent, something jQuery makes easy with on()

jQuery(function($) {
    $('#content').on('click', '#pagination a', function(e){
        e.preventDefault();
        var link = $(this).attr('href');
        $('#content').fadeOut(500, function(){
            $(this).load(link + ' #content', function() {
                $(this).fadeIn(500);
            });
        });
    });
});

Solution 2

I used adeneo's solution, with a couple of minor tweaks.

1. My pagination was outside of the container that I wanted to load, so I performed a separate call for the pagination content. Per the comments, I've updated the code to make a single Ajax call, filtering on the returned data to retrieve and update the desired elements.
2. My pagination consisted of all links, even for the current page. There was no point in doing an Ajax request if the clicked element is the active page, so I added logic to target only pagination links whose parent list item element did not have the .disabled class.
3. The page jumped every time I loaded new content because it was using fadeOut/In (which sets display: none; once the opacity animation is complete). Instead, I manually animate the opacity, which limits the amount of height fluctuation.

Here's the updated code:

$('#content').on('click', '#pagination :not(.disabled) a', function(e){
    e.preventDefault();
    var link = $(this).attr('href');
    $.post( link, function( data ) {
        var content = $(data).filter('#content');
        var pagination = $(data).filter('#pagination');
        $('#pagination').html(pagination.html());
        $('#content').animate(
            {opacity: 0},
            500, 
            function(){
                $(this).html(content.html()).animate(
                    {opacity: 1},
                    500
                );
            }
        );
    });
});

Comments

[Phillip Rauschkolb]

This does work great, but when the #content div fades back in, the old content is still there for a moment, then the new content snaps in. Any idea why that would be happening?

[Phillip Rauschkolb]

Nevermind, found that I just needed to put a small delay on it. Thanks again.

[adeneo]

@AleksandarĐorđević - I've edited the answer above to use the callback built into load(), that should solve any issues with content still visible etc.

[Vuk Stanković]

Just a note. This loads new content, but keeps old pagination links. Any way around this?

[Faisal]

I need the posts to be added under the older posts. Is that possible ?

[Faisal]

@adeneo I need the posts to be added under the older posts. Is that possible ?

[Matt]

@JaganK I've updated the code to make a single ajax request. Thanks!

[Matt]

@FaisalAbuJabal Your question is different enough, that it warrants asking a separate one altogether. I would not use numbered pagination in that case, but rather a "Load more posts" approach. Then use .append() instead of .html() - $('#content').append(content.html());. Please ask a new question if you want a more complete solution.

[J82]

I used this and it works, but I noticed that when I click on another page in the pagination, those new posts get wrapped up in a new div with the same ID. So essentially, there ends up being two of the same divs with the older one parenting the newer one. Any way to fix this or did I miss something?

[adeneo]

@J82 - It's a bit of a hack, but try doing $(this).load(link + ' #content *', function() { ... instead

[J82]

@adeneo That fixes the double ID issue, but now when I click on another page, it loads fine, but when I click back, it reloads the whole page (similar to the problem OP was having). Any ideas?

[adeneo]

@J82 - Click back, as in clicking the back button in the browser ?

[J82]

@adeneo No, I mean when I click on the link that takes me back to the first set of posts.

[adeneo]

As the event is delegated, you probably replaced or removed #content, but you claimed that the new #content was loading inside the old #content so I don't see why this would be an issue. I really don't know what's going on ?

[J82]

@adeneo Also, I have a simple code set up so that when I mouse over a post thumbnail, the thumbnail fades out and the title of the post fades in. After putting in this code, I noticed that when I click on a page to show a new set of posts, the code doesn't work anymore, meaning that when I mouse over an image, nothing happens. This is the code I'm using for the mouse over: pastebin.com/778YbepG Is this an issue on my end with my code?