Ajax Archives - kabita Dhimal

Let’s say, I have lists of categories in checkbox and I want to filter posts based on the selected categories. I have three conditions for categories filter :

I want to check “All” checkbox by default and display all the posts accordingly.
If I check/select the filter other than “All”, the “All” checkbox should be unchecked & the posts of checked categories should be displayed
If I check “All” categories, other selected categories should be unchecked

I begin…

Firstly, list all active categories associated with the posts

                 <div class="checkboxes-group">
                        <input type="checkbox" value="all" name="category[]"  class="js-filter-checkbox" id="all" />
                        <label for="all"><?php echo __('All','app')?></label>
                    </div>
   		<?php
                    $categories = get_categories( ['hide_empty'  => 1]);
                    foreach ($categories as $cat) {
                        ?>
                        <div class="checkboxes-group">
                            <input type="checkbox" value="<?=$cat->term_id?>" name="category[]" class=" js-filter-checkbox" id="<?=$cat->term_id?>" />
                            <label for="<?=$cat->term_id?>"><?=$cat->name?></label>
                        </div>
                    <?php } ?>

</div>

<?php

$categories = get_categories( ['hide_empty' => 1]);

foreach ($categories as $cat) {

<input type="checkbox" value="<?=$cat->term_id?>" name="category[]" class=" js-filter-checkbox" id="<?=$cat->term_id?>" />

</div>

<?php } ?>

Add jQuery that tricks the checkbox as per requirement…

    jQuery(function(){
         
            [].forEach.call(document.querySelectorAll('.js-filter-checkbox'), function(element){
                element.addEventListener('change', function(event){

                    var inputElement = event.currentTarget;
                    var count = document.querySelectorAll('.js-filter-checkbox:checked').length;

                    if(inputElement.checked && inputElement.value != 'all'){
                        document.querySelector('.js-filter-checkbox[value="all"]').checked = false;
                    }

                    if(inputElement.checked && inputElement.value == 'all'){
                        document.querySelectorAll('.js-filter-checkbox:not([value="all"])').forEach(function(item){
                            item.checked = false;
                        });
                    }
                    if(count == 0) document.querySelector('.js-filter-checkbox[value="all"]').checked = true;
                    submitCategory();
                })
            });

        });

jQuery(function(){

[].forEach.call(document.querySelectorAll('.js-filter-checkbox'), function(element){

element.addEventListener('change', function(event){

var inputElement = event.currentTarget;

var count = document.querySelectorAll('.js-filter-checkbox:checked').length;

if(inputElement.checked && inputElement.value != 'all'){

document.querySelector('.js-filter-checkbox[value="all"]').checked = false;

}

if(inputElement.checked && inputElement.value == 'all'){

document.querySelectorAll('.js-filter-checkbox:not([value="all"])').forEach(function(item){

item.checked = false;

});

}

if(count == 0) document.querySelector('.js-filter-checkbox[value="all"]').checked = true;

submitCategory();

})

});

In the above js code,
1. All the checkbox are selected using querySelectorAll

2. var count = document.querySelectorAll(‘.js-filter-checkbox:checked’).length, gives the number of checked categories.

3. If the checkbox is checked and among the checked categories there is no “All”, “ALL’ is unchecked

if(inputElement.checked && inputElement.value != ‘all’){
document.querySelector(‘.js-filter-checkbox[value=”all”]’).checked = false;
}

4. If one of the checked category is “All”, all the other checked categories are unchecked

if(inputElement.checked && inputElement.value == ‘all’){
document.querySelectorAll(‘.js-filter-checkbox:not([value=”all”])’).forEach(function(item){
item.checked = false;
});
}

5. If non of the categories is checked, “All’ category is checked
if(count == 0) document.querySelector(‘.js-filter-checkbox[value=”all”]’).checked = true;

On page load “All” categories is checked so that all the posts are displayed by default

jQuery( document ).ready(function() {
$('#all').prop('checked', true);
submitCategory();
});

jQuery( document ).ready(function() {

$('#all').prop('checked', true);

submitCategory();

});

Ajax code is added to filter the posts based on checked categories

    function submitForm() {
        var selectedCategories = [];
        var catInput ="" ;
        var filterCheckbox =   document.querySelectorAll(".js-filter-checkbox");
        if(filterCheckbox.length > 0 )  {
            [].forEach.call(filterCheckbox, function (item) {
                if (item.checked) selectedCategories.push(item.value);
            });
            if(selectedCategories.length > 0) {
                catInput = selectedCategories.join(",");
            }
        }
        var frmData = 'cat='+catInput +'&date='+year+'&action=display_news_contents';
        var ajaxURL = "<?=admin_url('admin-ajax.php')?>";
        $.ajax({
            url: ajaxURL,
            data: frmData,
            success: function(response){
                if (response.length > 0) {
                    $(".js-news-list").html(response);
                }
            }
        });
    }

function submitForm() {

var selectedCategories = [];

var catInput ="" ;

var filterCheckbox = document.querySelectorAll(".js-filter-checkbox");

if(filterCheckbox.length > 0 ) {

[].forEach.call(filterCheckbox, function (item) {

if (item.checked) selectedCategories.push(item.value);

});

if(selectedCategories.length > 0) {

catInput = selectedCategories.join(",");

}

var frmData = 'cat='+catInput +'&date='+year+'&action=display_news_contents';

var ajaxURL = "<?=admin_url('admin-ajax.php')?>";

$.ajax({

url: ajaxURL,

data: frmData,

success: function(response){

if (response.length > 0) {

$(".js-news-list").html(response);

}

});

}

Hook that handles our ajax request is added on function.php :

add_action( 'wp_ajax_display_posts_contents', 'display_news_posts_callbck' );
add_action( 'wp_ajax_nopriv_display_post_contents', 'display_news_posts_callbck' );

1 2	add_action( 'wp_ajax_display_posts_contents', 'display_news_posts_callbck' ); add_action( 'wp_ajax_nopriv_display_post_contents', 'display_news_posts_callbck' );

function display_news_contents_callbck() {
    extract($_GET);
$args = ['post_type' => "post",'posts_per_page'=>-1, 'post_status'=>'publish'];
if( !empty($_GET['cat'])&&  $_GET['cat']!="all") {
        $args['cat'] = $_GET['cat'];
}

$query = new WP_Query($args);
if ($query->have_posts()) :
    while ($query->have_posts()) : $query->the_post();
	 the_title("<h1>","</h1>");
 endwhile;
endif
  
    die();
}

function display_news_contents_callbck() {

extract($_GET);

$args = ['post_type' => "post",'posts_per_page'=>-1, 'post_status'=>'publish'];

if( !empty($_GET['cat'])&& $_GET['cat']!="all") {

$args['cat'] = $_GET['cat'];

}

$query = new WP_Query($args);

if ($query->have_posts()) :

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

the_title("<h1>","</h1>");

endwhile;

endif

die();

}

Finally, posts are filtered based on the selected categories.

kabita Dhimal

Explore, Learn, Upgrade and Share

Tag Archives: Ajax

jQuery ajax filtering posts with checkboxes