I am using ajax to load posts based on a filter. Should there be more than 9, I have pagination coming into play. While pagination calls the correct number of pages, the links themselves do not work. Instead they go to a page that ends with the site url + /wp-admin/admin-ajax.php?paged=2. That that page is blank with a 0 on it. That's it.
When I use javascript to dynamically overwrite the pagination link into them the correct links, the page only goes the same original page.
Any help is appreciated.
the ajax code in my functions.php
add_action( 'wp_ajax_myfilter', 'posts_filter_function' );
add_action( 'wp_ajax_nopriv_myfilter', 'posts_filter_function' );
function posts_filter_function() {
$args = array(
'order' => 'DESC',
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => 9,
'paged' => ( get_query_var( 'paged' ) ) ? get_query_var( 'paged' ) : 1,
);
// for categories!
if( isset( $_POST['categoryfilter'] ) )
$args['tax_query'] = array(
array(
'taxonomy' => 'category',
'field' => 'id',
'terms' => $_POST['categoryfilter']
)
);
// for topics!
// if( isset( $_POST['topicfilter'] ) )
// $args['tax_query'] = array(
// array(
// 'taxonomy' => 'topics',
// 'field' => 'id',
// 'terms' => $_POST['topicfilter']
// )
// );
$query = new WP_Query( $args );
$backup_image = get_field( 'featured_image_global', 'option' );
?>
<div class="news-grid grid-x small-up-1 medium-up-3">
<?php
if ( $query->have_posts() ) :
while ( $query->have_posts() ) : $query->the_post();
$image = get_the_post_thumbnail_url( $post->ID, 'featured-large' );
if ( $image ) {
$image = get_the_post_thumbnail_url( $post->ID, 'featured-large' );
} else {
$image = $backup_image;
}
?>
<div class="cell posts__filter--item">
<a href="<?php echo esc_html( get_post_permalink( $post->ID ) ); ?>">
<div class="card">
<div class="card-section">
<img
src="<?php echo esc_attr( $image ); ?>"
alt="<?php echo esc_html( get_post_meta( get_post_thumbnail_id( $post->ID ), '_wp_attachment_image_alt', true ) ); ?>">
<p class='date'><?php echo esc_html( get_the_date( 'd M \'y', $post->ID ) ); ?></p>
<h4><?php echo esc_html( get_the_title( $post->ID ) ); ?></h4>
<p class='author'><?php echo esc_html( post_authors( $post ) ); ?></p>
</div>
</div>
</a>
</div>
<?php
endwhile;
?>
</div>
<div class="pagination--container">
<?php
echo paginate_links(
array(
'base' => get_home_url() . '/news/' . '%_%',
'format' => '?paged=%#%',
'current' => max( 1, get_query_var( 'paged' ) ),
'total' => $query->max_num_pages,
'prev_text' => '1',
'next_text' => '1',
)
);
?>
</div>
<?php
wp_reset_postdata();
else :
echo '<h2 class="no-posts">No posts found</h2>';
endif;
die();
}
The filter form in my filter.php
$categories = get_terms(
array(
'taxonomy' => 'category',
'hide_empty' => true,
'orderby' => 'name',
)
);
$topics = get_terms(
array(
'taxonomy' => 'topics',
'hide_empty' => true,
'orderby' => 'name',
)
);
?>
<form
action="<?php echo site_url() ?>/wp-admin/admin-ajax.php"
method="POST"
class="searchandfilter"
id="filter">
<section class='postfilter'>
<div class="postfilter--filters flex-container flex-dir-column large-flex-dir-row">
<div class="flex-child-auto">
<input type="hidden">
<p class="">Filter By:</p>
</div>
<div class="ui-group flex-child-auto">
<select class="select--topic postform" name="topicfilter">
<option value="All">Topic</option>
<?php
foreach ( $topics as $topic ) {
?>
<option value="<?php echo esc_html( $topic->term_id ); ?>"><?php echo esc_html( $topic->name ); ?></option>
<?php
}
?>
</select>
</div>
<div class="ui-group flex-child-auto">
<select class="select--category postform" name="categoryfilter">
<option value="All">Category</option>
<?php
foreach ( $categories as $category ) {
?>
<option value="<?php echo esc_html( $category->term_id ); ?>"><?php echo esc_html( $category->name ); ?></option>
<?php
}
?>
</select>
</div>
<div class="flex-child-auto ui-group">
<button class="button button--orange button--filter">
Submit
</button>
<input type="hidden" name="action" value="myfilter">
</div>
</div>
</section>
The jquery code
$('#filter').submit(function(){
var filter = $('#filter');
var text = $('.no-posts');
var currentPosts = $('#response');
$.ajax({
url:filter.attr('action'),
data:filter.serialize(), // form data
type:filter.attr('method'), // POST
beforeSend:function(xhr){
text.text('Loading Posts...');
text[0].style.margin = '10rem auto';
currentPosts[0].style.display = 'none';
},
success:function(data){
text.text('');
text[0].style.margin = 0;
currentPosts[0].style.display = 'block';
$('#response').html(data); // insert data
}
});
return false;
});
