How to enable AJAX for WordPress WP Page-Navi Plugin

3 Views

I’m following Pippin Williamson’s tutorial on how to AJAX wordpress pagination for a kids toys site that I am creating.

Using the following javascript:

Read More
jQuery(document).ready(function(){
    jQuery('.pagination_container a').live('click', function(e)  {
    e.preventDefault();
    var link = jQuery(this).attr('href');
    jQuery('.content').fadeOut(500).load(link + '.content .prodlist_container', function() {
    jQuery('.content').fadeIn(500); });
    });
});

… i have managed to get the pagination to work but am experiencing the following issues:

  • Long delay in loading the paginated pages (considering the small image size)
  • all product images have strangely been given the hover state (blue graphic)
  • The pagination buttons no longer function correctly.

Any suggestions / advice appreciated as I’ve been going round in circles for a while.

Here’s the HTML / PHP in case that helps: 

<div class="content">


        <div class="breadpage_container group">

            <div id="breadcrumb_container">


            </div><!-- end breadcrumb_container -->

            <div class="pagination_container">


            </div><!-- end pagination container -->

        </div><!--end breadpage_container -->

        <div class="prodlist_container">

            <ul class="products group">

            <!-- loop to show products list -->

            <?php $args = array(
                'post_type' => 'products',
                'orderby' => 'title',
                'order' => 'DES',
                'posts_per_page' => 8,
                'paged' => get_query_var ('page'),
                'post_parent' => $parent
                ); ?>

            <?php query_posts($args); ?>

            <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

                <li>

                    <a href="<?php the_permalink() ?>" class="product_image">
                        <?php echo get_post_meta($post->ID, 'ProductImage', true);?>
                        <span class="overlay"></span>
                    </a>

                    <h3 class="product_tit"><a href="<?php the_permalink() ?>"><?php the_title();?></a></h3>
                    <p class="price_tag"><?php echo get_post_meta($post->ID, 'ProductPrice', true); ?></p>

                </li>   

            <?php endwhile; ?>

            <?php else :?>

                <p>There are no products to display</p>

            <?php endif; ?>


            </ul>   



        <div class="breadpage_container group" id="lower_breadpage_container">

            <div class="pagination_container">

                <?php wp_pagenavi(); ?>

                <?php wp_reset_query(); ?>                  

            </div><!-- end pagination container -->

        </div><!--end breadpage_container -->   

        </div><!-- prodlist_container -->   


</div><!-- end content -->
Post Views: 3

Related posts

Leave a Reply

3 comments

  1. I think there’s a couple of different issues here. First of all, it looks like there’s a small error in your load() function. When loading page fragments, you need to pass in the URL followed by the selectors but your string doesn’t have a space between the URL and the selectors. It should read:

    jQuery('.content').fadeOut(500).load(link + ' .content .prodlist_container', function() {

    That should solve the slow loading and the pagination problem (at the moment it’s probably trying to parse a bunch of .prodlist_container divs and getting confused).

    As for the hover problem, my guess is you’ve initiated this in jQuery on $(document).ready() but this isn’t triggered when a page fragment is loaded via AJAX. You’ll probably have to add the stuff you’ve currently got under $(document).ready() to a page initiation function and call this when load() completes, like this:

    jQuery('.content').fadeOut(500).load(link + ' .content .prodlist_container', function() {
    pageInit(); // New function with content of $(document).ready()
    jQuery('.content').fadeIn(500); });
});

    Remember, you’ll have to call pageInit() in $(document).ready() now though!

  2. A slightly altered version of @JunkMyFunk’s code did the trick for me:

    //AJAX PAGINATION
jQuery('.wp-pagenavi a').on('click', function(e){
    e.preventDefault();
    var link = $(this).attr('href');
    jQuery('#property-results').load(link + ' #property-results', function() {
        jQuery('#property-results').fadeIn(500);
    });
});

  3. For me the pictures load fast enough but the delay could be because youre loading the jquery pagination plugin and that might add a few extra seconds.

    I think for the hoover problem you need to reset the event every time a new page is loaded since the < li > of the 2nd and 3rd page arent loaded when you do the $(document).ready() ..

    1,2,3 pagination buttons work fine for me, but the >> stops on the second page. You need to update the href in that button everytime you load a new page but I dont know how that pagination plugin works…