CODEWITHSUNDEEP
jqueryajaxwordpresspagination
Phillip Rauschkolb
Phillip Rauschkolb

Reputation: 95

Simple Wordpress AJAX pagination

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>

Upvotes: 8

Views: 44132

Answers (2)

adeneo
adeneo

Reputation: 318182

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

Upvotes: 28

Matt
Matt

Reputation: 1058

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

Upvotes: 4

Related Questions