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