AJAX post filter

Maak het formulier om de actie uit te voeren. Dit moet in de betreffende template.

<form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="filter">
	<?php
		if( $terms = get_terms( 'category', 'orderby=name' ) ) : // to make it simple I use default categories
			echo '<select name="categoryfilter"><option>Select category...</option>';
			foreach ( $terms as $term ) :
				echo '<option value="' . $term->term_id . '">' . $term->name . '</option>'; // ID of the category as the value of an option
			endforeach;
			echo '</select>';
		endif;
	?>
	<input type="text" name="price_min" placeholder="Min price" />
	<input type="text" name="price_max" placeholder="Max price" />
	<label>
		<input type="radio" name="date" value="ASC" /> Date: Ascending
	</label>
	<label>
		<input type="radio" name="date" value="DESC" selected="selected" /> Date: Descending
	</label>
	<label>
		<input type="checkbox" name="featured_image" /> Only posts with featured image
	</label>
	<button>Apply filter</button>
	<input type="hidden" name="action" value="myfilter">
</form>
<div id="response"></div>

Bovenaan moet het script om de AJAX call te doen

jQuery(function($){
	$('#filter').submit(function(){
		var filter = $('#filter');
		$.ajax({
			url:filter.attr('action'),
			data:filter.serialize(), // form data
			type:filter.attr('method'), // POST
			beforeSend:function(xhr){
				filter.find('button').text('Processing...'); // changing the button label
			},
			success:function(data){
				filter.find('button').text('Apply filter'); // changing the button label back
				$('#response').html(data); // insert data
			}
		});
		return false;
	});
});

De selectiebox kunnen we doorzoekbaar maken d.m.v. select2. Daarnaast kan de submit button dan verborgen worden omdat het hiermee ook mogelijk wordt om bij selectie te zoeken.

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script>
	function matchStart(params, data) {
    params.term = params.term || '';
    if (data.text.toUpperCase().indexOf(params.term.toUpperCase()) == 0) {
        return data;
    }
    return false;
}
	$(document).ready(function() {
$('#zkn').hide(); // verberg submit button
		$('#post-select').select2({
		  width: '100%',
		  placeholder: "Select or search an PDF file",
		  allowClear: true,
		  matcher: function(params, data) {
		        return matchStart(params, data);
		    }
		});
	$('select#post-select').on('select2:select', function () {
	  $('#zkn').trigger('click');
	});
});

 

De AJAX filter zelf moet in de functions.php

function misha_filter_function(){
	$args = array(
		'orderby' => 'date', // we will sort posts by date
		'order'	=> $_POST['date'] // ASC или DESC
	);
 
	// for taxonomies / categories
	if( isset( $_POST['categoryfilter'] ) )
		$args['tax_query'] = array(
			array(
				'taxonomy' => 'download_cats',
				'field' => 'id',
				'terms' => $_POST['categoryfilter']
			)
		);
 
	$query = new WP_Query( $args );
 
	if( $query->have_posts() ) :
		while( $query->have_posts() ): $query->the_post();
			echo '<div class="col-xs-12 col-sm-12 col-md-6">';
			echo '<h2>' . the_title() . '</h2>';
			echo '</div>';
			$file = get_field('file');
			if( $file ): ?>
			<div class="col-xs-12 col-sm-12 col-md-6">
			<a href="<?php echo $file['url']; ?>">Download file</a>
			</div>
			<?php endif;
		endwhile;
		wp_reset_postdata();
	else :
		echo 'Nothing found';
	endif;
 
	die();
}
 
add_action('wp_ajax_myfilter', 'misha_filter_function'); 
add_action('wp_ajax_nopriv_myfilter', 'misha_filter_function');

 

#AJAX #dropdown #jQuery