What I’m trying to accomplish is producing numbered pagination for posts which are loaded via an ajax function. I have to make the numbered pagination work via ajax as well. Explanation of each code block below:
This function produces taxonomy terms which currently have posts assigned. Code resides in functions.php.
'tribe_events_cat',
'hide_empty' => true,
) );
?>
Upon clicking on the resulting buttons from the previous function, a custom WP_Query runs and displays posts that match the criteria in the function below. This function resides in functions.php. I think I have to pass the $paged variable from the load_events_by_category() function into the javascript code. Unfortunately, I’m at a loss as to how to do it. Maybe the $paged variable needs to be applied as a second key / value pair in the wp_localize_script() declaration? Now I’m thinking out loud.
'tribe_events',
'posts_per_page' => 4,
'post_status' => 'publish',
'eventDisplay' => 'custom',
'order' => 'ASC',
'paged' => $paged,
'tax_query' => array(
array(
'taxonomy' => 'tribe_events_cat',
'field' => 'term_id',
'terms' => $term_id
)
)
);
$catquery = new WP_Query( $category_events_args );
ob_start();
if( $catquery->have_posts() ) : ?>
have_posts() ) : $catquery->the_post(); ?>
"
data-slug=""
data-term-id=""
style="background:"
>
">
-
![]("<?php)
" alt="rotating arrow icon for weekly events" width="20" height="20" /> Weekly Event
max_num_pages;
$pagination_args = array(
'base' => '%_%',
'format' => '?paged=%#%',
'total' => $total,
'current' => $paged,
'show_all' => false,
'end_size' => 1,
'mid_size' => 2,
'prev_next' => true,
'prev_text' => __('«'),
'next_text' => __('»'),
'type' => 'plain',
'add_args' => false,
'add_fragment' => '',
'before_page_number' => '',
'after_page_number' => ''
);
$paginate_links = paginate_links($pagination_args);
if ($paginate_links) : ?>
I’m not sure if this is important but I’ll include it anyway. It’s how I’m using wp_localize_script, also located in functions.php.
admin_url( 'admin-ajax.php' )
));
?>
And finally, here’s the code in above javascript file.
(function ($) {
$(".category-block button").on('click', function (e) {
e.preventDefault();
$.ajax({
type: 'POST',
url: categoryevents.ajaxurl,
data: {
action: 'load_events_by_category',
taxonomy: $(this).data('taxonomy'),
slug: $(this).data('slug'),
term_id: $(this).data('term-id')
},
success: function (html) {
$('#fl-main-content').find('#event_results .fl-rich-text').empty();
$('#event_results .fl-rich-text').append(html);
},
error: function (error) {
console.log("Error: ", error)
}
})
});
})(jQuery);
I actually did try passing the $paged variable into the script vars of the wp_localize_script declaration. I thought that would at least make the javascript “aware” of what page of results were showing.
wp_localize_script( 'ajax-load-category-events', 'categoryevents', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ), 'paged' => $_POST['paged'] ? $_POST['paged'] : 1; ));
I also spent hours upon hours reviewing similar SO questions and looking for tutorials on how to solve this problem. I’ll be darned but it doesn’t seem using ajax pagination inside ajax produced content is much of a thing.