Hello Expert Developer,
Can you please take a look on it, What i did messed up?
function mysite_filter_function(){
//groups checkboxes
if( $groups = get_terms( array( 'taxonomy' => 'category' ) ) ) :
$groups_terms = array();
foreach( $groups as $group ) {
if( isset( $_POST['group_' . $group->term_id ] ) && $_POST['group_' . $group->term_id] == 'on' )
$groups_terms[] = $group->slug;
}
endif;
$tax_query = array( 'relation' => 'AND' );
if ( ! empty( $groups_terms ) ) {
$tax_query[] = array(
'taxonomy' => 'category',
'field' => 'slug',
'terms' => $groups_terms,
);
}
$args = array(
'orderby' => 'date',
'post_type' => 'course',
'posts_per_page' => -1,
'tax_query' => $tax_query,
);
$query = new WP_Query( $args );
if( $query->have_posts() ) :
while( $query->have_posts() ): $query->the_post();
// echo '<h2>' . $query->post->post_title . '</h2>';
// get_template_part( 'customcourse');
?>
<div class="col-md-4">
<a href="<?php echo esc_url( post_permalink() ); ?>">
<div class="course_post_card">
<div class="course_title">
<h2><?php the_title(); ?></h2>
</div>
<div class="course_footer">
<div class="course_footer_location">
<a href="<?php echo esc_url( post_permalink() ); ?>"> <i class="fa fa-map-marker"></i> <span><?php echo get_post_meta(get_the_ID(), 'skips_size', TRUE);?></span> </a>
</div>
<div class="course_footer_date">
<a href="<?php echo esc_url( post_permalink() ); ?>"> <i class="fa fa-calendar"></i> <span><?php echo get_post_meta(get_the_ID(), 'skips_width', TRUE);?></span> </a>
</div>
</div>
</div>
</a>
</div>
<?php
endwhile;
wp_reset_postdata();
else :
echo 'No posts found';
endif;
die();
}
add_action('wp_ajax_myfilter', 'mysite_filter_function');
add_action('wp_ajax_nopriv_myfilter', 'mysite_filter_function');
and this is my course page
<?php
/**
* Template Name: Courses Pages
*
* @package WordPress
* @subpackage Twenty_Fourteen
* @since Twenty Fourteen 1.0
*/
get_header();
//Add AJAX path to use in load-posts.js
$getPath = array('ajaxURL' => admin_url('admin-ajax.php'));
?>
<body <?php body_class( 'site-content' ); ?>>
<div class="container" style="padding: 80px 0px;">
<div class="row">
<div class="col-md-12">
<form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="filter">
<?php
if( $groups = get_terms( array( 'taxonomy' => 'category' ) ) ) :
echo '<ul class="groups-list">';
echo "<label><input type='checkbox' name='all' id='all'> All</label>";
foreach( $groups as $group ) :
echo '<input type="checkbox" class="" id="group_' . $group->term_id . '" name="group_' . $group->term_id . '" /><label for="group_' . $group->term_id . '">' . $group->name . '</label>';
endforeach;
echo '</ul>';
endif;
?>
<input type="hidden" name="action" value="myfilter">
</form>
</div>
<div class="row all-post">
<!-- All the post -->
</div>
<!-- Load More Button -->
<div class="col-md-12 align-self-center text-center">
<button class="btn btn-primary" id="loadMore">Load More</button>
</div>
</div>
</div>
</body>
<script>
$('#filter').change(function(){
var filter = $('#filter');
$.ajax({
url:filter.attr('action'),
data:filter.serialize(),
type:filter.attr('method'),
beforeSend:function(xhr){
//filter.find('button').text('Processing...');
},
success:function(data){
//filter.find('button').text('Filter');
$('.all-post').html(data);
}
});
return false;
});
</script>
<?php
get_footer();
?>