Caveat, I can’t really test this right now. However, there are several things that I think could be improved from your code.
First if we read the codex or some tips on using ajax we can setup an ajax callback function that isn’t pointing to a file where we have to bootstrap the WordPress load functions.
I will make the assumption that all your script is in a JS file and being properly enqueued:
// embed the javascript file that makes the AJAX request
wp_enqueue_script( 'wpa-95258-ajax-request', plugin_dir_url( __FILE__ ) . 'js/ajax.js', array( 'jquery' ) );
// declare the URL to the file that handles the AJAX request (wp-admin/admin-ajax.php)
wp_localize_script( 'wpa-95258-ajax-request', 'wpa-95258-ajax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
Using wp_localize_script
we can pass some variables to a script object that will then be available in the script. We’ll use this for the .ajax
URL parameter. We also need an action
parameter, because WordPress will look for
// this hook is fired if the current viewer is not logged in
do_action( 'wp_ajax_nopriv_' . $_REQUEST['action'] );
// if logged in:
do_action( 'wp_ajax_' . $_POST['action'] );
So we can use that later on to attach a callback function to any ajax action. First I’ve adapted your .ajax
to have an action and use the WordPress ajax url:
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',
action: 'batchhandler' // use this to add a callback
},
dataType: 'html',
url: wpa-95258-ajax.ajaxurl, //from localize script
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');
}
});
}
Now that we have a hook to attach to we can build the callback function without the bootstrapped loader. I’d also recommend getting rid of query_posts()
. That does wonky things to the query and it is generally recommended around here to use new WP_Query
.
I’ve adjusted your batchloop.php to be a callback function instead:
function wp_ajax_batchhandler_callback(){
// 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
);
$ajax_query = new WP_query($args);
// our loop
if ($ajax_query->have_posts()) {
while ($ajax_query->have_posts()){
$ajax_query->the_post();
get_template_part( 'thumbs', get_post_format() );
}
}
// unset($page, $posts, $category);
wp_reset_postdata();
}
add_action( 'wp_ajax_nopriv_batchhandler', 'batchhandler_callback' ); //logged out users
add_action( 'wp_ajax_batchhandler', 'batchhandler_callback' ); //logged in users
Like I said, I didn’t test this but it looks like you are using:
$page = (isset($_GET['pageNumber'])) ? $_GET['pageNumber'] : 0;
To get the page number that you are using in the query. However, you aren’t sending the pageNumber in the .ajax
function so I doubt you’ll get proper pagination. However, you should now be hooked up with the appropriate way to make ajax calls in WordPress, and I think pagination can be fixed by passing the pageNumber variable.