How to Add Ajax Pagination On Ajax Post filter Res

I am developing a website with taxonomy filter. I have created taxonomy widget like this

Tax A
Tax B
Tax C
Tax D

And place one apply filter below that when i clicking apply filter it will filter post by Ajax request and Append Post on HTML. Now I want to show Ajax load More Button on Filter Ajax result i have added some code for load more but its fetching post from all taxonomy. I want to work the load more like this if i filter Tax A and i want to show post in Tax A taxonomy on load More.

Following are my code: On Function.php

function misha_my_load_more_button_scripts() {

    global $wp_query; 

    wp_register_script( 'misha_filter_scripts', get_stylesheet_directory_uri().'/custom.js', array('jquery'), '1.0.0', true );
    wp_enqueue_script( 'misha_filter_scripts' );

    // now the most interesting part
    // we have to pass parameters to myloadmore.js script but we can get the parameters values only in PHP
    // you can define variables directly in your HTML but I decided that the most proper way is wp_localize_script()
    wp_localize_script( 'misha_filter_scripts', 'misha_loadmore_button_params', array(
        'ajaxurl' => site_url() . '/wp-admin/admin-ajax.php', // WordPress AJAX
        'posts' => json_encode( $wp_query->query_vars ), // everything about your loop is here
        'current_page' => $wp_query->query_vars['paged'] ? $wp_query->query_vars['paged'] : 1,
        'max_page' => $wp_query->max_num_pages
    ) );
}
    add_action( 'wp_enqueue_scripts', 'misha_my_load_more_button_scripts', 1 );

//functon for ajax blog filter
add_action('wp_ajax_myfilter', 'wph_filter_function'); // wp_ajax_{ACTION HERE} 
add_action('wp_ajax_nopriv_myfilter', 'wph_filter_function');

function wph_filter_function(){
// $CurrentPage = get_query_var('paged');
//$paged = $_POST['paged'];
//wp_reset_postdata();
if( isset( $_POST['categoryfilter'] ) ){
    $category_post = $_POST['categoryfilter'];
}

if( isset( $_POST['categoryfilter_prod'] ) ){
    $category_product = $_POST['categoryfilter_prod'];
}
if( isset( $_POST['categoryfilter_resource'] ) ){
    $category_resource = $_POST['categoryfilter_resource'];
}
//var_dump($category_post);
//var_dump($category_product);
//var_dump($category_resource);
$tax_query = array('relation' => 'AND');
    if (isset($_POST['categoryfilter']))
    {
                $tax_query[] =  array(
                'taxonomy' => 'category',
                'field' => 'id',
                'terms' => $category_post
            );
    }
    if (isset($_POST['categoryfilter_prod']))
    {

                $tax_query[] =  array(
                'taxonomy' => 'cat_product',
                'field' => 'id',
                'terms' => $category_product
            );
    }
    if (isset($_POST['categoryfilter_resource']))
    {

                $tax_query[] =  array(
                'taxonomy' => 'resource',
                'field' => 'id',
                'terms' => $category_resource
            );
    }

   $query = new WP_Query( array( 
  'post_type' => 'post',
  'posts_per_page' =>30,
  'orderby' => 'date',
  'order'   => 'DESC',
 'paged' => $CurrentPage,
  'tax_query' => $tax_query,
  )
);
    if( $query->have_posts() ) :
        while( $query->have_posts() ): $query->the_post();
            ?>
            <?php if( get_field('show_login_only') ): ?>
               <div class="res-entry">
                                        <div class="row">
                                            <div class="col-md-4">
                                                <?php
                                                if ( has_post_thumbnail()) the_post_thumbnail('resource-blog');
                                                ?>
                                            </div>
                                            <div class="col-md-8 blog-details">

                                                                    <a class="related-title" href="<?php the_permalink(); ?>" title="<?php echo esc_attr( the_title_attribute( 'echo=0' ) ); ?>"><?php the_title(); ?></a>
                                                                    <br>
                                                                    <div class="posted-date">
                                                                    <?php palliance_posted_on_noslash(); ?>
                                                                    </div>
                                                                    <div class="post-less">
                                                                    <?php echo excerpt(20); ?>
                                                                    </div>

                                            </div>
                                        </div>
                </div>

            <?php endif; ?>
            <?php
        endwhile;
        wp_reset_postdata();

            if (  $query->max_num_pages > 1 ) :
    echo '<div id="misha_loadmore">More posts</div>'; // you can use <a> as well
endif;              

    else :
        echo 'No posts found';
    endif;


    die();
}



add_action('wp_ajax_loadmorebutton', 'misha_loadmore_button_ajax_handler');
add_action('wp_ajax_nopriv_loadmorebutton', 'misha_loadmore_button_ajax_handler');
function misha_loadmore_button_ajax_handler(){

    $args = unserialize( stripslashes( $_POST['query']) );
    $args['paged'] = $_POST['page'] + 1; 
    $args['post_status'] = 'publish';

$query = new WP_Query( $args );

    global $wp_query;

    if( $query->have_posts() ) :



        while( $query->have_posts() ): $query->the_post();
    ?>

            <div class="res-entry">
                                        <div class="row">
                                            <div class="col-md-4">
                                                <?php
                                                if ( has_post_thumbnail()) the_post_thumbnail('resource-blog');
                                                ?>
                                            </div>
                                            <div class="col-md-8 blog-details">

                                                                    <a class="related-title" href="<?php the_permalink(); ?>" title="<?php echo esc_attr( the_title_attribute( 'echo=0' ) ); ?>"><?php the_title(); ?></a>
                                                                    <br>
                                                                    <div class="posted-date">
                                                                    <?php palliance_posted_on_noslash(); ?>
                                                                    </div>
                                                                    <div class="post-less">
                                                                    <?php echo excerpt(20); ?>
                                                                    </div>

                                            </div>
                                        </div>
                </div>

<?php
        endwhile;



    else :
        get_template_part( 'template-parts/content', 'none' );
    endif;

    die; 
}

Jquery Code is following

jQuery(function($){
    $('#filter').on('change', 'input[type=checkbox]', function() {
        setTimeout(function(){

           // $(".filter-btn").click();


        },1);

    });
    $('#clear-all-filter-1').click(function() {
                 $(".filter-form input[type=checkbox]").attr("checked", false);
                 setTimeout(function(){
                    $(".filter-btn").click();
                },1);
    });
     $('#clear-all-filter-2').click(function() {
                 $(".filter-form input[type=checkbox]").attr("checked", false);
                 setTimeout(function(){
                    $(".filter-btn").click();
                },1);
    });

    $('#filter').submit(function(){
        var filter = $('#filter');
        var response = $('#response');

        $.ajax({
            //url:filter.attr('action'),
            url : misha_loadmore_button_params.ajaxurl,
           data : $('#filter').serialize(), // form data
//            dataType : 'json', // this data type allows us to receive objects from the server
            type : 'POST',
            beforeSend:function(xhr){
                filter.find('.filter-btn').text('Processing...'); // changing the button label
                //response.find('.res-entry').css("background-color", "yellow"); // changing the button label

            },
            success:function(data){
                misha_loadmore_button_params.current_page = 1;
                // set the new query parameters
                misha_loadmore_button_params.posts = data.posts;

                // set the new max page parameter
                misha_loadmore_button_params.max_page = data.max_page;

                filter.find('.filter-btn').text('Apply filter'); // changing the button label back
                //$('#response').html(data); // insert data
                $("#response").html('');
$("#response").append(data);
            },
            error: function(MLHttpRequest, textStatus, errorThrown){
 alert(errorThrown);
 }
        });
        return false;
    });
});


jQuery(document).ready( function($) {

    /*
     * Load More
     */
    $('#misha_loadmore').click(function(){

        $.ajax({
            url : misha_loadmore_button_params.ajaxurl, // AJAX handler
            data : {
                'action': 'loadmorebutton', // the parameter for admin-ajax.php
                'query': misha_loadmore_button_params.posts, // loop parameters passed by wp_localize_script()
                'page' : misha_loadmore_button_params.current_page // current page
            },
            type : 'POST',
            beforeSend : function ( xhr ) {
                $('#misha_loadmore').text('Loading...'); // some type of preloader
            },
            success : function( data ){
                if( data ) {

                    $('#misha_loadmore').text( 'More posts' );
                    $('#response').append(data); // insert new posts
                    misha_loadmore_button_params.current_page++;

                    if ( misha_loadmore_button_params.current_page == misha_loadmore_button_params.max_page ) 
                        $('#misha_loadmore').hide(); // if last page, HIDE the button

                } else {
                    $('#misha_loadmore').hide(); // if no data, HIDE the button as well
                }
            }
        });
        return false;
    });



});

标签： javascript php jquery ajax wordpress

1条回答

别忘想泡老子

2楼-- · 2020-03-31 08:23

I think you need to use json_encode to get the current $query_var for the selected filters!

Added ob_start(); and ob_get_contents(); to pass posts to variable

Change you filter function with this and tell me if it work.

I hope it help!

//functon for ajax blog filter
add_action('wp_ajax_myfilter', 'wph_filter_function'); // wp_ajax_{ACTION HERE} 
add_action('wp_ajax_nopriv_myfilter', 'wph_filter_function');

function wph_filter_function(){
// $CurrentPage = get_query_var('paged');
//$paged = $_POST['paged'];
//wp_reset_postdata();
if( isset( $_POST['categoryfilter'] ) ){
    $category_post = $_POST['categoryfilter'];
}

if( isset( $_POST['categoryfilter_prod'] ) ){
    $category_product = $_POST['categoryfilter_prod'];
}
if( isset( $_POST['categoryfilter_resource'] ) ){
    $category_resource = $_POST['categoryfilter_resource'];
}
//var_dump($category_post);
//var_dump($category_product);
//var_dump($category_resource);
$tax_query = array('relation' => 'AND');
    if (isset($_POST['categoryfilter']))
    {
                $tax_query[] =  array(
                'taxonomy' => 'category',
                'field' => 'id',
                'terms' => $category_post
            );
    }
    if (isset($_POST['categoryfilter_prod']))
    {

                $tax_query[] =  array(
                'taxonomy' => 'cat_product',
                'field' => 'id',
                'terms' => $category_product
            );
    }
    if (isset($_POST['categoryfilter_resource']))
    {

                $tax_query[] =  array(
                'taxonomy' => 'resource',
                'field' => 'id',
                'terms' => $category_resource
            );
    }

   $query = new WP_Query( array( 
  'post_type' => 'post',
  'posts_per_page' =>30,
  'orderby' => 'date',
  'order'   => 'DESC',
 'paged' => $CurrentPage,
  'tax_query' => $tax_query,
  )
);
    if( $query->have_posts() ) :

    ob_start();

        while( $query->have_posts() ): $query->the_post();
            ?>
            <?php if( get_field('show_login_only') ): ?>
               <div class="res-entry">
                                        <div class="row">
                                            <div class="col-md-4">
                                                <?php
                                                if ( has_post_thumbnail()) the_post_thumbnail('resource-blog');
                                                ?>
                                            </div>
                                            <div class="col-md-8 blog-details">

                                                                    <a class="related-title" href="<?php the_permalink(); ?>" title="<?php echo esc_attr( the_title_attribute( 'echo=0' ) ); ?>"><?php the_title(); ?></a>
                                                                    <br>
                                                                    <div class="posted-date">
                                                                    <?php palliance_posted_on_noslash(); ?>
                                                                    </div>
                                                                    <div class="post-less">
                                                                    <?php echo excerpt(20); ?>
                                                                    </div>

                                            </div>
                                        </div>
                </div>

            <?php endif; ?>
            <?php
        endwhile;
        wp_reset_postdata();

        if (  $query->max_num_pages > 1 ) :
            echo '<div id="misha_loadmore">More posts</div>'; // you can use <a> as well
        endif;

        $content = ob_get_contents(); // we pass the posts to variable
        ob_end_clean(); // clear the buffer


        else :
        ob_start(); // start the buffer to capture the output of the template
        get_template_part( 'template-parts/content', 'none' );
        $content = ob_get_contents(); // pass the output to variable
        ob_end_clean();

    endif;

     echo json_encode( array(
        'posts' => json_encode( $wp_query->query_vars ),
        'max_page' => $wp_query->max_num_pages,
        'found_posts' => $wp_query->found_posts,
        'content' => $content
     ));

    die();
}

0人赞添加讨论(0) 举报

How to Add Ajax Pagination On Ajax Post filter Res

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间