How I could get AJAX response splitted in two separate divs?
Situation: I have custom post type (case-studies) filter by custom taxonomy(case study category). On page load I query by exact category. But when I filter it by category I want to get AJAX response divided into two parts. First one even posts appears in filtered-post-top div and odd posts appears in filtered-post-bottom div.
Here is what I have achieved so far.
functionts.php file:
function filter_ajax() {
$category = $_POST['category'];
$args = array(
'post_type' => 'case-studies',
'posts_per_page' => 4,
'tax_query' => array(
array(
'taxonomy' => 'case_study_categories',
'terms' => $category
)
)
);
$query = new WP_Query($args);
if($query->have_posts()) :
while($query->have_posts()) : $query->the_post();
get_template_part( 'partials/case-studies-archive-post' );
endwhile;
endif;
wp_reset_postdata();
die();
}
ajaxRequest.js
$(document).ready(function () {
$('.filter-item > span').on('click', function(e) {
e.preventDefault();
var category = $(this).data('category');
console.log(category);
data = {
'action': 'filter',
'category': category
};
$.ajax({
url : wp_ajax.ajax_url,
data : data,
type : 'post',
success: function(result) {
$('.filtered-posts').html(result);
console.log(result);
},
error: function(result) {
console.warn(result);
}
});
})
});
Archive-case-studies.php
<section>
<div class="filtered-posts-top">
<?php
$args = array(
'post_type' => 'case-studies',
'posts_per_page' => 4,
'tax_query' => array(
array(
'taxonomy' => 'case_study_categories',
'terms' => 14
)
)
);
$counter = 0;
$query = new WP_Query($args);
if ($query->have_posts()) :
while ( $query->have_posts()) : $query->the_post();
$counter++;
if( $counter % 2 == 0 ) :
get_template_part( 'partials/case-studies-archive-post' );
endif;
endwhile;
endif;
wp_reset_postdata(); ?>
</div>
<div class="case-studies-categories">
<?php
$args = array(
'taxonomy' => 'case_study_categories'
);
$categories = get_terms( $args );
?>
<?php foreach ( $categories as $cat ) :?>
<div class="filter-item">
<span data-category="<?php echo $cat->term_id;?>"><?php echo $cat->name; ?></span>
</div>
<?php endforeach; ?>
</div>
<div class="filtered-posts-bottom">
<?php
$args = array(
'post_type' => 'case-studies',
'posts_per_page' => 4,
'tax_query' => array(
array(
'taxonomy' => 'case_study_categories',
'terms' => 14
)
)
);
$counter = 0;
$query = new WP_Query($args);
if ($query->have_posts()) :
while ( $query->have_posts()) : $query->the_post();
$counter++;
if( $counter % 2 == 1 ) :
get_template_part( 'partials/case-studies-archive-post' );
endif;
endwhile;
endif;
wp_reset_postdata(); ?>
</div>
</section>
Maybe someone will have idea how to solve the issue.