AJAX getting posts from wpquery, prevent post duplication - php

Question

I'm trying to AJAX loading posts in my blog, I've successfully get it to work this way:
the page displays 3 posts on page load, then the visitor can get 3 more posts each time he clicks the button "LOAD MORE".
Now I want to load 9 posts on page load but keep 3 posts with each click on "LOAD MORE" button.
A problem occurs with the page number value in the WPQuery, it's getting the same 3 posts which were already displayed.
how can I prevent posts duplication?
Please check it here at my temp website
[note that I have less than 9 posts at the category page, it should load all of them]
(function($) {
$(document).ready(function(){
var $content = $('#list-content');
var $btnLoad = $('#btnLoad');
var loading = true;
var page = 1;
var load_posts = function($count){
var post_id = $(this).attr( 'id' );
/** Ajax Call */
$.ajax({
cache : false,
timeout : 8000,
url : php_array.admin_ajax,
type : "POST",
data : {action:'main_query', numPosts : $count, pageNumber: page, condition: php_array.condition, val: php_array.val},
beforeSend : function() {
$('#loadimg').slideToggle("fast");
$btnLoad.prop("disabled",true);
},
success : function(data, textStatus, jqXHR ){
var $data = $( data );
if($data.length){
$content.append( $data );
$btnLoad.prop("disabled",false);
}
else{
$btnLoad.html("That's it");
$btnLoad.prop("disabled",true);
}
},
error : function( jqXHR, textStatus, errorThrown ){
if(t==="timeout") {
alert("Server is too slow, try again later");
} else {
alert(t);
}
console.log( 'ajaxLoop.js: The following error occured: ' + textStatus, errorThrown );
},
complete : function( jqXHR, textStatus ){
$('#loadimg').slideToggle("fast");
loading = false;
page++;
}
});
}
$btnLoad.on("click", function(e) {
e.preventDefault();
loading = true;
load_posts(3);
});
load_posts(9); //load the first elements
});
})(jQuery);
PHP code:
function main_query_init() {
/** Made Query */
$numPosts = (isset($_POST['numPosts'])) ? $_POST['numPosts'] : 0;
$page = (isset($_POST['pageNumber'])) ? $_POST['pageNumber'] : 0;
$condition = (isset($_POST['condition'])) ? $_POST['condition'] : '';
$val = (isset($_POST['val'])) ? $_POST['val'] : '';
$args = array(
'posts_per_page'=> $numPosts,
'paged' => $page,
);
if($condition != ''){
$args[$condition] = $val;
}
$post_query = new WP_Query( $args );
if ($post_query->have_posts()) : while ($post_query->have_posts()) : $post_query->the_post();

Answer 1

You are probably looking for the offset parameter for WP_Query. Setting it to 3 will cause it to skip the first 3 results when using posts_per_page and paged.
The other option is to specify the post_ids that you don't want explicitly using the post__not_in parameter, but this will require passing the array of values to exclude with each request - you might be able to get away with just passing in the first 3 IDs, but I would go with offset.

Answer 2

The key is var currCount = $data.filter('article').length;
where I store the current count of posts from ajax response.
Since I ask for extra 3 posts every load button click, then if((currCount % 3) == 0) will tell me if it got 3 posts otherwise there are no more posts and there is no need to increment page counter.
success : function(data, textStatus, jqXHR ){
var $data = $( data );
var currCount = $data.filter('article').length;
totalCount += currCount;
if(currCount > 0){
$content.append( $data );
$btnLoad.prop("disabled",false);
if((currCount % 3) == 0)
page += currCount / 3;
else
page += (parseInt(totalCount/3) + 1);
return;
}
$btnLoad.html("That's it");
$btnLoad.prop("disabled",true);
},