How do I use AJAX Query in my posts loop?

I have this function in my functions.php.

All the AJAX and Query is working but displays the results of the loop right below the AJAX filter.

I want the query loop to display in my main theme’s masonry.php file instead.

Is this possible somehow? I was trying to make the $query variable global and use it elsewhere but no luck.

Cheers.

function misha_filter_function(){
// $args = array(
// ‘orderby’ => ‘date’, // we will sort posts by date
// ‘order’ => $_POST[‘date’] // ASC or DESC
// );

$args = array (
‘posts_per_page’ => -1
);

if( isset( $_POST[‘sortby’] ) )
switch ($_POST[‘sortby’])
{
case ‘DATE_ASC’:
$args = array(
‘posts_per_page’ => -1,
‘orderby’ => ‘date’,
‘order’ => ‘ASC’
);
break;
case ‘DATE_DESC’:
$args = array(
‘posts_per_page’ => -1,
‘orderby’ => ‘date’,
‘order’ => ‘DESC’
);
break;
case ‘PRICE_ASC’:
$args = array(
‘posts_per_page’ => -1,
‘meta_key’ => ‘image_price’,
‘type’ => ‘NUMERIC’,
‘orderby’ => ‘meta_value_num’,
‘order’ => ‘ASC’
);
break;
case ‘PRICE_DESC’:
$args = array(
‘posts_per_page’ => -1,
‘meta_key’ => ‘image_price’,
‘type’ => ‘NUMERIC’,
‘orderby’ => ‘meta_value_num’,
‘order’ => ‘DESC’
);
break;
}

// for taxonomies / categories
if( isset( $_POST[‘categoryfilter’] ) )
$args[‘tax_query’] = array(
array(
‘taxonomy’ => ‘category’,
‘field’ => ‘id’,
‘terms’ => $_POST[‘categoryfilter’]
)
);

// create $args[‘meta_query’] array if one of the following fields is filled
if( isset( $_POST[‘price_min’] ) && $_POST[‘price_min’] || isset( $_POST[‘price_max’] ) && $_POST[‘price_max’] )
$args[‘meta_query’] = array( ‘relation’=>’AND’ ); // AND means that all conditions of meta_query should be true

// if both minimum price and maximum price are specified we will use BETWEEN comparison
if( isset( $_POST[‘price_min’] ) && $_POST[‘price_min’] && isset( $_POST[‘price_max’] ) && $_POST[‘price_max’] ) {
$args[‘meta_query’][] = array(
‘meta_key’ => ‘image_price’,
‘value’ => array( $_POST[‘price_min’], $_POST[‘price_max’] ),
‘type’ => ‘NUMERIC’,
‘compare’ => ‘between’
);
} else {
// if only min price is set
if( isset( $_POST[‘price_min’] ) && $_POST[‘price_min’] )
$args[‘meta_query’][] = array(
‘key’ => ‘image_price’,
‘value’ => $_POST[‘price_min’],
‘type’ => ‘NUMERIC’,
‘compare’ => ‘>’
);

// if only max price is set
if( isset( $_POST[‘price_max’] ) && $_POST[‘price_max’] )
$args[‘meta_query’][] = array(
‘key’ => ‘image_price’,
‘value’ => $_POST[‘price_max’],
‘type’ => ‘NUMERIC’,
‘compare’ => ‘<‘
);
}

// if post thumbnail is set
if( isset( $_POST[‘featured_image’] ) && $_POST[‘featured_image’] == ‘on’ )
$args[‘meta_query’][] = array(
‘key’ => ‘_thumbnail_id’,
‘compare’ => ‘EXISTS’
);

global $query;
$query = new WP_Query( $args );
add_query_var($query);

if( $query->have_posts() ) :
while( $query->have_posts() ): $query->the_post();
echo ‘<h2>’ . $query->post->post_title . ‘</h2>’;
endwhile;
wp_reset_postdata();
else :
echo ‘No posts found’;
endif;

die();
}

add_action(‘wp_ajax_myfilter’, ‘misha_filter_function’);
add_action(‘wp_ajax_nopriv_myfilter’, ‘misha_filter_function’);

Read more here:: How do I use AJAX Query in my posts loop?

Leave a Reply

Your email address will not be published. Required fields are marked *