WordPress AJAX admin-ajax.php Pagination

Question

I am at a wall here. I am updating my search result using ajax like so :

function ajax_search_enqueues() {
if ( is_search() ) {
    wp_enqueue_script( 'ajax-search', get_stylesheet_directory_uri() . '/js/custom/ajax-search.js', array( 'jquery' ), '1.0.0', true );
    wp_localize_script( 'ajax-search', 'myAjax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}
}

add_action( 'wp_enqueue_scripts', 'ajax_search_enqueues' );

I am triggering the ajax call on an input change with this

jQuery('input[type="checkbox"]').on( 'change', function() {

    var cat = jQuery(this).attr('name');

    if (this.checked) {
        cats.push(cat);
    } else {
        cats.splice(cats.indexOf(cat), 1);
    }

    jQuery.ajax({
        type: 'GET',
        url: myAjax.ajaxurl,
        data: {
            action: 'load_search_results',
            categories: cats,
            s: s
        },
        success: function( data ) {
            jQuery( ".content").empty().append( data );
            console.log(data);
        }
    });

} );

add_action( 'wp_ajax_load_search_results', 'load_search_results' );

add_action( 'wp_ajax_nopriv_load_search_results', 'load_search_results' ); add_action( 'genesis_after_content', 'breed_posts_nav' );

and calling the functions like so

function load_search_results() {
get_template_part( 'loop', 'grid' );

$args = array(
    'post_type' => 'post',
    's' => $_GET['s'],
    'category__in' =>$_GET['categories'],
    'posts_per_page' => 12,
);

// doing loop stuff 

die();
}

I am retrieving all information properly besides pagination. The reason pagination breaks is because I am filtering by category. So on the left hand side I have category checkboxes and when a checkbox is changed it triggers the ajax request. I can get the pagination to update but when clicking on the page number the url is directed to http://dev:8888/wp-admin/admin-ajax.php?action=load_search_results/blah/blah/blah this breaks the page and is no longer on the search.php page. Is there a way to use pagination using ajax? Any help would be appreciated.

Seems like you have some sort of global ajax interceptor modifying the url. Worst case you could try manually creating the url string. Or find the ajax interceptor method and adjust it — charlietfl
– charlietfl, Commented Aug 7, 2015 at 23:51

Abdul Rahuman M · Accepted Answer · 2016-04-22 20:08:21Z

filter.js
---------
$('#post-category').change(function(){
        category = $(this).find('.selected').text();
        postType = $('#search-form-type').val();
        post_filter();
    });


function post_filter(paged){
        $.ajax(
            {
                url:ajaxUrl,
                type:"POST",
                data: {action:"get_post_category","category":category,'search':search, 'postType':postType, 'paged': paged},
                success: function(response) {
                $('#blog-post-cover').html(response);
            }
        });
    }

    $('#blog-wrapper').on('click','#pagination a',function(e){
        e.preventDefault();     
        if ($(this).hasClass('prev')||$(this).hasClass('next')) {
            paginateNum = $(this).find('.prev-next').data('attr');
            post_filter(paginateNum);
        }
        else{
            paginateNum = $(this).text();
            post_filter(paginateNum);
        }
        $("html, body").animate({ scrollTop: 0 }, "slow");
    });
    postType = $('#search-form-type').val();
    post_filter(1);

function.php
------------

/*  ==========================================================================
     Blog filter
    ========================================================================== */

    add_action( 'wp_ajax_nopriv_get_post_category', 'post_category' );
    add_action( 'wp_ajax_get_post_category', 'post_category' );   
    function post_category() {
        $post_type = $_POST['postType'];      
        $category = $_POST['category'];
        $search = $_POST['search'];
        $paged = ($_POST['paged'])? $_POST['paged'] : 1;
        if($post_type==="resource-center"):
            $taxonomy ="resource-center-taxonomy";
        else:
            $taxonomy ="category";
        endif;
        if($category):
            $args = array(
                'post_type'         => $post_type,
                'post_status'       => 'publish',
                'tax_query' => array(
                    array(
                        'taxonomy' => $taxonomy,
                        'field'    => 'slug',
                        'terms'    => $category,
                    ),
                ),
                'posts_per_page'    => 5,
                'order'             => 'ASC',
                's'                 => $search,
                'paged'             => $paged
            );
        else:
            $args = array(
                'post_type'         => $post_type,
                'post_status'       => 'publish',
                'posts_per_page'    => 5,
                'order'             => 'ASC',
                's'                 => $search,
                'paged'             => $paged
            );
        endif;

        $posts = new WP_Query($args);?>
        <?php if ( $posts->have_posts() ) :?>
            <?php while ($posts->have_posts()) : $posts->the_post(); ?>
        <?php echo $post->post_title; ?>
            <?php endwhile;?>
            <?php
                $nextpage = $paged+1;
                $prevouspage = $paged-1;
                $total = $posts->max_num_pages;
                $pagination_args = array(
                'base'               => '%_%',
                'format'             => '?paged=%#%',
                'total'              => $total,
                'current'            => $paged,
                'show_all'           => false,
                'end_size'           => 1,
                'mid_size'           => 2,
                'prev_next'          => true,
                'prev_text'       => __('<span class="prev-next" data-attr="'.$prevouspage.'">&laquo;</span>'),
                'next_text'       => __('<span class="prev-next" data-attr="'.$nextpage.'">&raquo;</span>'),
                'type'               => 'plain',
                'add_args'           => false,
                'add_fragment'       => '',
                'before_page_number' => '',
                'after_page_number'  => ''
            );
            $paginate_links = paginate_links($pagination_args);

            if ($paginate_links) {
                echo "<div id='pagination' class='pagination'>";
                echo $paginate_links;
                echo "</div>";
            }?>
            <?php wp_reset_query();  ?>
        <?php else:?>           
           <div class="no-post-cover">
                <div class="container">         
                   <h1 class="has-no-post-list">Posts Not Found</h1>
                </div>
            </div>
       <?php endif;?>         
       <?php die(1);
    }

you need to pass paginateNum through ajax so that you can get $nextpage = $paged+1; $prevouspage = $paged-1; $total = $posts->max_num_pages;

Collectives™ on Stack Overflow

WordPress AJAX admin-ajax.php Pagination

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related