Ajax filters for CPT with custom taxonomy

ajax-filter-posts.js

(function($) {
    'use strict';

    jQuery(document).ready(function() {
    	
    	//Load all posts
    	asr_ajax_get_postdata(-1);

    	$('.asr_texonomy').on('click',function(){
    		var term_id = $(this).attr('data_id');
    		$(this).addClass('active').siblings().removeClass('active');

    		//console.log(term_id);
    		asr_ajax_get_postdata(term_id);

    	});

    	//ajax filter function
    	function asr_ajax_get_postdata(term_ID){
    		$.ajax({
    			type: 'post',
    			url: asr_ajax_params.asr_ajax_url,
    			data: {
    				action: 'asr_filter_posts',
    				asr_ajax_nonce: asr_ajax_params.asr_ajax_nonce,
    				term_ID: term_ID,
    			},
    			beforeSend: function(data){
    				$('.asr-loader').show();
    			},
    			complete: function(data){
    				$('.asr-loader').hide();
    			},    			
    			success: function(data){
    				$('.asrafp-filter-result').fadeOut(300, function() {
						$(this).html(data).fadeIn(300);
					});
    			},
    			error: function(data){
    				console.log(data);
    			},

    		});
    	}


    });

})(jQuery);

content-staff.php

<div class="col-md-4 col-sm-12">


  <article <?php post_class(); ?>>

     <a href="<?php the_permalink(); ?>">

      <header class="heading-cpt-broadcast">
        <?php
        if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
        the_post_thumbnail( 'full' );
        }
        ?>

      </header>

      <div class="entry-summary">

        <?php the_excerpt(); ?>

      </div>

    </a>

  </article>

</div>

functions.php

/**
 *
 * Custom Staff CPT Categories Ajax filters - Enqueue funtion and Shortcode
 *
 */
function cpt_staff_ajax_scripts(){

	wp_enqueue_script('jquery');
	wp_register_script( 'asr_ajax_filter_post', get_template_directory_uri() .'/assets/js/ajax-filter-posts.js','jquery','1.0');
	wp_enqueue_script('asr_ajax_filter_post');
	wp_localize_script( 'asr_ajax_filter_post', 'asr_ajax_params', array(
        'asr_ajax_nonce' => wp_create_nonce( 'asr_ajax_nonce' ),
        'asr_ajax_url' => admin_url( 'admin-ajax.php' ),
    )
  );
}

add_action( 'wp_enqueue_scripts', 'cpt_staff_ajax_scripts' );

//shortcode function
function ns_shortcode_mapper(){

	$taxonomy = 'staff-department';
	$terms = get_terms($taxonomy); // Get all terms of a taxonomy

	if ( $terms && !is_wp_error( $terms ) ){ ?>

		<section>

			<div class="container">

				<div class="row">

					<div class="col-md-12 asr-filter-div">

						<ul>

						<?php  foreach( $terms as $term ) { ?>

								<li class="asr_texonomy" data_id="<?php echo $term->term_id; ?>"><?php echo $term->name; ?></li>

						<?php  } ?>

						</ul>

					</div>

				</div>

			</div>

		</section>


    <?php } ?>

    <div class="asr-ajax-container">
	    <div class="asr-loader">
	    	<img src="<?php get_template_directory_uri() .'/assets/ajax-loader.gif' ?>" alt="">
	    </div>
	    <div class="asrafp-filter-result"></div>
    </div>

<?php

}
add_shortcode( 'cpt_staff_ajax_filters', 'ns_shortcode_mapper' );


//ajax actions
add_action('wp_ajax_asr_filter_posts', 'ns_ajax_functions');
add_action('wp_ajax_nopriv_asr_filter_posts', 'ns_ajax_functions');

//ajax main function
function ns_ajax_functions(){
	// Verify nonce
  	if( !isset( $_POST['asr_ajax_nonce'] ) || !wp_verify_nonce( $_POST['asr_ajax_nonce'], 'asr_ajax_nonce' ) )
    die('Permission denied');

	$term_ID = sanitize_text_field( intval($_POST['term_ID']) );

	//post query
	$query = new WP_Query( array(
		'post_type' => 'staff',
		'post_per_pages' => -1,
		'order' => 'ASC',
		'tax_query' => array(
			array(
				'taxonomy' => 'staff-department',
				'field' => 'term_id',
				'terms' => $term_ID,
			)
		)

	) );  ?>
		<section class="staff-cpt-landing">

			<div class="container">

				<div class="row">

						<?php	if( $query->have_posts() ):

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

							<?php get_template_part( 'partials/content', 'staff' );?>

						<?php endwhile; ?>

					</div>

				</div>

		</section>


	   <?php else:

			 $the_query = new WP_Query( array(
			     'post_type' => 'staff',
					 'post_per_pages' => -1,
					 'order' => 'ASC',
			     'tax_query' => array(
			         array (
			             'taxonomy' => 'staff-department',
			             'field' => 'slug',
			             'terms' => 'leadership',
			         )
			     ),
			 ) );

		 ?>

		 <section class="staff-cpt-landing">

				 <div class="container">

					 <div class="row">

							<?php  while ( $the_query->have_posts() ) :

							$the_query->the_post(); ?>

								 <?php get_template_part( 'partials/content', 'staff' );?>


						 <?php  endwhile; ?>

					 </div>

				 </div>

		 </section>


			<?php /* Restore original Post Data
			  * NB: Because we are using new WP_Query we aren't stomping on the
			  * original $wp_query and it does not need to be reset.
			 */
			 wp_reset_postdata();

			 ?>

		<?php endif;

		wp_reset_query();

	die();
}