I cant find anything on stack overflow that covers my issue, after hours of debugging and checking answers to similar questions but not quite the same scope, I cannot figure out the problem.
Basically I am loading posts on scroll. But I am doing it by year, grouping posts each time by year. The code in action can be seen here for context:
The code works at first, on scroll it fetches the first previous year, but then after that it stops working, just loads, no errors return in console.
Here is the complete Ajax php function:
function loadmore_scroll_ajax_handler(){
// prepare our arguments for the query
$args = json_decode( stripslashes( $_POST['query'] ), true );
$args['paged'] = $_POST['page'] + 1; // we need next page to be loaded
$args['post_status'] = 'publish';
$args['posts_per_page'] = 12;
$args['ignore_sticky_posts'] = 1;
//$date_after = $_POST['year_before'];
$year_query = $_POST['year'];
$args['date_query'] = array(
//set date ranges with strings!
'after' => (string) $_POST['year'] - 1,
'before' => $_POST['year'],
//allow exact matches to be returned
'inclusive'=> true,
);
// $args['date_query'] = array(
// 'date_query' => array(
// 'relation' => 'OR',
// array(
// 'year' => (int) $year_query,
// ),
// ),
// );
//$args['year'] = (int) $_POST['year'] - 1;
// it is always better to use WP_Query but not here
query_posts( $args );
if( have_posts() ) :
while( have_posts() ): the_post();
$year = get_the_date( 'Y' );
if ( ! isset( $years[ $year ] ) ) $years[ $year ] = array();
// if ($year != $year_check) {
// if ($year_check != '') {
// print '</div>'; // cm-grid
// print '</div>'; // issues-group-listing
// print '</div>'; // issues-group
// }
// print '<div class="issues-group" data-year="'.get_the_date('Y').'">';
// print '<div class="issues-group-year">'. get_the_date('Y') .'</div>';
// print '<div class="issues-group-listing">';
// print '<div class="cm-grid cm-grid--fours">';
// }
$post_obj = array(
'id' => get_the_ID(),
'permalink' => get_the_permalink(),
'title' => get_the_title(),
);
$years[ $year ][] = $post_obj;
endwhile;
foreach($years as $key => $value) :
?>
<div class="issues-group" data-year="<?php echo $key; ?>">
<div class="issues-group-year"><?php echo $key; ?></div>
<div class="issues-group-listing">
<div class="cm-grid cm-grid--fours">
<?php
foreach($value as $article) :
?>
<article class="cm-post cm-post--issue" id="<?php echo $article['id']; ?>">
<div class="cm-issue-inner">
<div class="cm-issue-head">
<h1 class="cm-issue-title"><a href="<?php echo esc_url($article['permalink']); ?>"><?php echo $article['title']; ?></a></h1>
</div>
<div class="cm-issue-image">
<div class="cm-issue-image-box">
<a href="<?php echo esc_url($article['permalink']); ?>">
<?php echo get_the_post_thumbnail( $article['id'] , 'full', array( 'class' => 'img-responsive' ) ); ?>
</a>
</div>
</div>
<div class="cm-issue-body">
<a class="cm-button cm-button-outline on-light" href="<?php echo esc_url($article['permalink']); ?>"><span>Read Issue</span></a>
</div>
</div>
</article>
<?php
endforeach;
?>
</div>
</div>
</div>
<?php
endforeach;
endif;
die; // here we exit the script and even no wp_reset_query() required!
}
Here is the jquery ajax script:
function initAjaxScroll($) {
var canBeLoaded = true, // this param allows to initiate the AJAX call only if necessary
bottomOffset = 1700; // the distance (in px) from the page bottom when you want to load more posts
var that = $(this);
var postContainer = $('.ajax-loadscroll');
$(window).scroll(function(){
var data = {
'action': 'loadmore_scroll',
'query': options.posts,
'page' : options.current_page,
'year' : options.year,
'total' : options.max_page,
};
if( $(document).scrollTop() > ( $(document).height() - bottomOffset ) && canBeLoaded == true ){
$.ajax({
url : cmm_ajax_obj.ajax_url,
data: data,
type:'POST',
beforeSend : function ( xhr ) {
postContainer.next().addClass('is-loading');
// you can also add your own preloader here
// you see, the AJAX call is in process, we shouldn't run it again until complete
canBeLoaded = false;
},
success:function(data){
if( data ) {
postContainer.find('div.issues-group').last().after(data);
postContainer.next().removeClass('is-loading');
if ( options.current_page != options.max_page ) {
canBeLoaded = true; // the ajax is completed, now we can run it again
options.current_page++;
options.year--;
}
}
},
error: function (request, status, error) {
alert(request.responseText);
}
});
}
});
}
And in my functions.php:
$script_data = array(
'posts' => json_encode( $wp_query->query_vars ),
'year' => date("Y",strtotime("-2 year")),
'current_page' => get_query_var( 'paged' ) ? get_query_var('paged') : 1,
'max_page' => $wp_query->max_num_pages
);
wp_localize_script('cmm-main', 'options', $script_data);
Any help much appreciated!
发布者:admin,转转请注明出处:http://www.yc00.com/questions/1745109809a4611778.html
评论列表(0条)