Hi
I’ve inherited a Sage website so still trying to get used to it all. In the long run I think I’m really going to like it.
Im having an issue when trying to filter my posts with Ajax and can’t seem to fix it.
I’ve got wp_localize_script set up to get my admin-ajax.php which works fine in console log when testing.
Post Filter
/**
* Post Filter
*/
if (!function_exists(__NAMESPACE__ . '\\filter_posts')) :
function filter_posts()
{
?>
<div class="post-filter">
<form method="POST" id="filter" class="row post-dropdowns case-study-filters">
<div class="col-md-6 filter">
<p>Filter by: <span class="invisible-select">
<?php wp_dropdown_categories(
array(
'taxonomy' => 'cs_sections',
'orderby' => 'name',
'show_count' => false,
'show_option_all' => 'All (Default)',
'hide_empty' => 0,
'name' => 'categoryfilter',
))
?>
</span>
</p>
</div>
<input type="hidden" name="action" value="myfilter">
</form>
</div>
<?php
}
endif;
Post Filter Function
/**
* Post filter function
*/
function post_filter_function()
{
$args = array(
'orderby' => 'date', // we will sort posts by date
'order' => $_POST['date'] // ASC or DESC
);
// for taxonomies / categories
if (isset($_POST['categoryfilter']))
$args['tax_query'] = array(
array(
'taxonomy' => 'cs_sections',
'field' => 'id',
'terms' => $_POST['categoryfilter']
)
);
$query = new \WP_Query($args);
if ($query->have_posts()) :
//echo '<div class="row">';
while ($query->have_posts()): $query->the_post(); ?>
<article <?= post_class('col-sm-6 col-md-4 col-lg-3 news-item') ?>>
<a href="<?= get_permalink(); ?>">
<div class="inner">
<div class="image">
<?php if(has_post_thumbnail()) :
the_post_thumbnail('news');
else:
Nav\get_placeholder_image();
endif; ?>
</div>
</div>
<div class="lining">
<h4><?= get_the_title() ?></h4>
<div class="entry">
<?= the_excerpt() ?>
</div>
<p class="read-more">View</p>
</div>
<div class="location">
<?php $loc = get_post_meta($post->ID,'_case_study_location',true);
if($loc) : ?>
<p><span class="icon icon-location-pin"></span><?= $loc ?></p>
<?php endif; ?>
</div>
</a>
</article>
<?php endwhile;
// echo '</div>';
wp_reset_postdata();
else :
echo 'No posts found';
endif;
die();
}
add_action('wp_ajax_myfilter', __NAMESPACE__ . '\\post_filter_function');
add_action('wp_ajax_nopriv_myfilter', __NAMESPACE__ . '\\post_filter_function');
Custom archive
<div class="container-fluid">
{!! App\filter_posts() !!}
<div id="blog-posts" class="list row grid-layout index-grid">
@while (have_posts()) @php the_post() @endphp
@include('partials.content-case-study')
@endwhile
@php wp_reset_query() @endphp
</div>
</div>
Common JS
/**
* AJAX filter functionality
*/
$('#categoryfilter').change(function () {
var filter = $('#filter');
$.ajax({
// eslint-disable-next-line no-undef
url: themePaths.ajax_url,
data: filter.serialize(), // form data
type: filter.attr('method'), // POST
beforeSend: function () {
// check if all categories is selected
if (filter.serialize().indexOf('categoryfilter=0') !== -1) {
location.reload();
}
// eslint-disable-next-line no-undef
console.log(themePaths.ajax_url);
},
success: function (data) {
$('#blog-posts').html(data); // insert data
},
});
return false;
});
Console log is returning the admin-ajax.php file, but Im also getting 403 forbidden error.
I’ve also tried the same code on a non Sage custom theme and it worked. Any idea where I may have gone wrong? Any help is very much appreciated.