wordpress ajax pagination breaks after 10 pages

1 Views

Can someone help me with ajax pagination please, i’m on it 2 days already and can’t figure it out. I have Load More style pagination, this is the code, preety classic(down below).
Everything works as planing except when the placeholder reaches page 10. Then, hell break loose and nothing is loading anymore. The button still works untill maxpages is reached and so the button gets removed, but nothing happens with more than 10 placeholders. The website i’m currently using this scriptand the place you can test yourself is this: http://filmhdonline.com/category/toate-filmele/
I would appreciate someone having an ideea what i’m talking about. Thanks in advance. 

jQuery(document).ready(function() {

    // The number of the next page to load (/page/x/).
    var pageNum = parseInt(pbd_alp.startPage);

    // The maximum number of pages the current query can return.
    var max = parseInt(pbd_alp.maxPages);

    // The link of the next page of posts.
    var nextLink = pbd_alp.nextLink; pageNum++;

    //Load more videos translation
    var more = pbd_alp.more;

    //Loading videos translation
    var loading = pbd_alp.loading;

    /**
     * Replace the traditional navigation with our own,
     * but only if there is at least one page of new posts to load.
     */

    if(pageNum <= max) {

       // Remove the traditional navigation.
        jQuery('.pagination').remove();

        // Insert the "More Posts" link.
        if( jQuery('#content').find('ul.listing-videos').length == 1 ){
            jQuery('#content ul.listing-videos').append('<li class="more-posts pbd-alp-placeholder-' + pageNum + '"></li>');
            jQuery('#content').append('<p id="pbd-alp-load-posts" class="pagination"><a href="#">' + more + '</a></p>');
        }

    }


    /**
     * Load new posts when the link is clicked.
     */
    jQuery('#pbd-alp-load-posts a').click(function() {

        // Are there more posts to load?
        if(pageNum <= max) {

            // Show that we're working.
            jQuery(this).text(loading);

            jQuery('.pbd-alp-placeholder-'+ pageNum).load(nextLink + ' #content ul.listing-videos li',
                function() {
                    //jQuery('.pbd-alp-placeholder-'+ pageNum).children('li').unwrap();                   
                    console.log(pageNum);

                    jQuery(this).children().hide();


                    $newContent = jQuery(this).children().unwrap();


                    $newContent.fadeIn('fast');

                    // Update page number and nextLink.
                    pageNum++;
                    nextLink = nextLink.replace(//page/[0-9]?/, '/page/'+ pageNum);

                    **// Add a new placeholder, for when user clicks again.
                    jQuery('#content ul.listing-videos').append('<li class="more-posts pbd-alp-placeholder-'+ pageNum +'"></li>');**

                    // Update the button message.
                    if(pageNum <= max) {
                        jQuery('#pbd-alp-load-posts a').text('Vezi mai multe');
                    } else {
                        jQuery('#pbd-alp-load-posts a').remove();
                    }
                }
            );
        } else {
            jQuery('#pbd-alp-load-posts a').append('.');
        }   

        return false;
    });
});
Post Views: 1

Related posts

Leave a Reply

2 comments

  1. For ajax pagination in wordpress, You can use the plugin like https://wordpress.org/plugins/wp-pagenavi/.

    OR

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

  2. I Have the same problem.
    If it still happening, replace:

    nextLink = nextLink.replace(//page/[0-9]?/, '/page/'+ pageNum);

    to 

    nextLink = nextLink.replace(//page/[0-9]*/, '/page/'+ pageNum);

    Problem in wrong regex [0-9]? match only single number from 1 to 9. From 10 it takes only 1. Instead [0-9]* match from 0 to infinity. So, it breaks after 9 (form 0 to 9), because next 10 and it’s take fore use only 1.