Hi,
I am trying to load pages using ajax but I am having some problems. Instead of the page content my posts are being loaded on page change.
Here comes my function and js:
function my_ajax_pagination() {
$query_vars = json_decode( stripslashes( $_POST['query_vars'] ), true );
$query_vars['paged'] = $_POST['page'];
$posts = new WP_Query( $query_vars );
$GLOBALS['wp_query'] = $posts;
if( ! $posts->have_posts() ) {
get_template_part( 'content', 'none' );
}
else {
while ( $posts->have_posts() ) {
$posts->the_post();
get_template_part( 'content', 'page' );
}
}
die();
}
JS:
(function($){
function find_page_number( element ) {
return parseInt( element.html() );
}
$(document).on( 'click', '.menu a', function( event ) {
event.preventDefault();
page = find_page_number( $(this).clone() );
$.ajax({
url: ajaxpagination.ajaxurl,
type: 'post',
data: {
action: 'ajax_pagination',
query_vars: ajaxpagination.query_vars,
page: page
},
beforeSend: function() {
$('main').empty();
$(document).scrollTop();
$('body').append( '<div class="page-content" id="loader">Loading New Posts...</div>' );
},
success: function( html ) {
$('#loader').remove();
$('main').append( html );
}
})
})
})( jQuery );
Can anyone help me?