WP_Query with ajax handler returns the same posts - ajax

Question

I have a problem that is getting me bald atm. I have a ajax call that handles a loop that handles some querys and returns posts for me.
So far so good, but the first time the user sees the page we should load 10 posts, and then we want to click a button to request 5 more.
So far so good.
But when we request the 5 more posts we get the 5 first posts again.
My batchloop
<?php
// Our include
define('WP_USE_THEMES', false);
require_once('../../../wp-load.php');
// Our variables
$posts = (isset($_GET['numPosts'])) ? $_GET['numPosts'] : 0;
$page = (isset($_GET['pageNumber'])) ? $_GET['pageNumber'] : 0;
$category = (isset($_GET['category_name'])) ? $_GET['category_name'] : 0;
var_dump($posts);
$args = array(
'posts_per_page' => $posts,
'category_name' => $category,
'post_status' => 'publish',
'orderby' => 'date',
'order' => 'DESC',
'paged' => $page
);
query_posts($args);
// $query = new WP_query($args);
// our loop
if (have_posts()) {
$paged = (get_query_var('paged')) ? get_query_var('paged') : 1; query_posts($args);
while (have_posts()){
the_post();
get_template_part( 'thumbs', get_post_format() );
}
}
// unset($page, $posts, $category);
// wp_reset_postdata();
wp_reset_query();
?>
Does anybody sees what im doing wrong?
EDIT:
batch handler
function _batchhandler() {
var getamount = localStorage.getItem('amount');
console.log('amount of posts to retrive ' + JSON.parse(getamount));
// Ajax call
$.ajax({
type: 'GET',
data: {
posts: getamount,
page: page,
category: 'work'
},
dataType: 'html',
url: 'http://dev.xxx.se/wp-content/themes/xxx/batch.php',
beforeSend: function() {
_setHeader;
if( page != 1 ) {
console.log('Loading');
// Show the preloader
$('body').prepend('<div class="preloader"><span class="rotate"></span></div>');
}
// If we reach the end we hide the show more button
if( page >= total ) {
$('.load').hide();
}
},
success: function(data) {
console.log(page);
var scroll = ($('.thumb').height() * posts);
// If thumbs exist append them
if( data.length ) {
// Append the data
$('#batch').append(data);
// Remove the crappy width and height attrs from the image * Generated by WP *
$('img').removeAttr('height').removeAttr('width');
// Animate each new object in a nice way
(function _showitem() {
$('#batch .thumb:hidden:first').addClass('show', 80, _showitem);
// On the last request do load any more
loading = false;
})();
// Remove the preloader
$('.preloader').fadeOut(200, function() {
$('.preloader').remove();
});
}
// return false;
},
complete: function() {
// Delete storage
localStorage.clear();
// Update the scroller to match the updated content length
if (scroller)
setTimeout("scroller.refresh()", 300);
// Initalize the load more button
_clickhandler();
},
error: function() {
console.log('No page found');
}
});
}
and my load more button function
$('.load').on('click', function(event) {
event.preventDefault();
// Delete storage
localStorage.clear();
if(!loading) {
loading = true;
// Increase our pagenumber per click
page++;
count++;
// Remove preloader
$('.preloader').remove();
setTimeout(function() {
$('#batch').css({
'-webkit-transform' : 'translateY(-' + ($('#batch li').outerHeight() * count) + 'px)'
});
}, 30);
// Clear storage and set a new
localStorage.setItem('amount', JSON.stringify(amount.medium));
var getamount = localStorage.getItem('amount');
// Send the request to the handler
_batchhandler(page);
}
});
Everything seems fine, the first 10 (1-10) posts loads as the should, but the first time "load more" is clicked we get the next 5 results but the results are posts that loaded the first time (5-10). If we click the "load more" again, we get the correct result

Answer 1

I don't think you have defined a start value for page, set it to 1 at the start of your script so when it increments on click it goes to page 2. Otherwise it'll just get the first page.