Following this great tutorial I've implemented Ajax pagination with scrolling: /.

Now, I've added a second Ajax call to filter the posts by category and I would to make pagination works also for the filtered posts.

So I thought to make something like this in function filter_posts() in functions.php:

function filter_posts() {
   global $wp_query;
   $args['category_name'] = $_POST['passed_slug_via_ajax'];

   query_posts($args);

    [loop]
    wp_send_json_success( $data );

   };

I thought that in this way, ie using query_posts, the current query global $wp_query; was altered to include the $args['category_name'] filter, so when I trigger the "more posts" function it would paginate the filtered results:

// more posts" function
function more_posts() {
  global $wp_query;
  $args['paged'] = $_POST['passed_page_via_ajax'];

  query_posts($args);

   [loop]
   wp_send_json_success( $data );

};

No way: the tiggered more_posts() function doesn't apply the filter...

So I've tried to manually alter the global $wp_query; in this way in filter_posts() function:

function filter_posts() {
   global $wp_query;
   $args['category_name'] = $_POST['passed_slug_via_ajax'];

   query_posts($args);

    [loop]
    $wp_query->set( "category_name", $_POST['passed_slug_via_ajax'] );
    wp_send_json_success( $data );

   };

But it doesn't work...

Maybe I didn't catch exactly the idea of how global $wp_query; it works?

Following this great tutorial I've implemented Ajax pagination with scrolling: https://www.billerickson/infinite-scroll-in-wordpress/.

Now, I've added a second Ajax call to filter the posts by category and I would to make pagination works also for the filtered posts.

So I thought to make something like this in function filter_posts() in functions.php:

function filter_posts() {
   global $wp_query;
   $args['category_name'] = $_POST['passed_slug_via_ajax'];

   query_posts($args);

    [loop]
    wp_send_json_success( $data );

   };

I thought that in this way, ie using query_posts, the current query global $wp_query; was altered to include the $args['category_name'] filter, so when I trigger the "more posts" function it would paginate the filtered results:

// more posts" function
function more_posts() {
  global $wp_query;
  $args['paged'] = $_POST['passed_page_via_ajax'];

  query_posts($args);

   [loop]
   wp_send_json_success( $data );

};

No way: the tiggered more_posts() function doesn't apply the filter...

So I've tried to manually alter the global $wp_query; in this way in filter_posts() function:

function filter_posts() {
   global $wp_query;
   $args['category_name'] = $_POST['passed_slug_via_ajax'];

   query_posts($args);

    [loop]
    $wp_query->set( "category_name", $_POST['passed_slug_via_ajax'] );
    wp_send_json_success( $data );

   };

But it doesn't work...

Maybe I didn't catch exactly the idea of how global $wp_query; it works?

• wp-query
• ajax
• globals

• to alter the query presscustomizr/snippet/… – inarilo Commented Jun 3, 2017 at 16:47
• there is no global query object on an ajax request, you set all of the query arguments you need within your function and create a new query object, the same way the tutorial you linked does it. – Milo Commented Jun 3, 2017 at 18:02
• @Milo There is: in the linked tutorial wp_localize_script() is used to pass to JS the global $wp_query object with 'query' => $wp_query->query; then, function be_ajax_load_more() get all the $args it need from this global query object – AmintaCode Commented Jun 3, 2017 at 22:39
• @inarilo I knew that link but it explains nothing about my question – AmintaCode Commented Jun 3, 2017 at 22:43
• your tutorial is constructing a new wp_query object in the ajax functions, why are you using query_posts or global $wp_query? your code will work if you do it as in the tutorial – inarilo Commented Jun 4, 2017 at 3:19

1 Answer 1

As @Milo brilliantly pointed out, there is no such a thing like a global query object in Wordpress.

So I've solved the problem via JS, like this:

 var isFiltered = false;
 var filters;

 $(load_more_button).click(function(e) {
     load_more_handler(e);
 });

 $(filters_form).submit(function(e) {
     filter_handler(e);
 });

 function filter_handler(e) {
    isFiltered = true;

    filters = $(this).serialize();
    var data = {
        action: 'ajax_filter',
        query:  php_vars.query, // // query is got from wp_localize_script()
        filters: filters
    };
    $.post(php_vars.adminAjaxUrl, data, function(res) {
    [etc]

 };

 function load_more_handler(e) {

        var data = {
              action: 'ajax_load_more',
              query:    php_vars.query, // query is got from wp_localize_script()
              page: page,
              isFiltered: isFiltered,
              filters: filters
        };
        $.post(php_vars.adminAjaxUrl, data, function(res) {
        [etc]
 };

and in functions.php something like:

function ajax_load_more_posts() {

   $args = isset( $_POST['query'] ) ? array_map( 'esc_attr', $_POST['query'] ) : array();

     if( isset($_POST['isFiltered']) && ( $_POST['isFiltered'] ) ) {

         $filters = $_POST['filters'];
         $args = wp_parse_args(get_ajax_filters($filters), $args); // get_ajax_filters() is a custom utility function of mine to combine filters passed by Ajax and $args
        };

     [loop]
     wp_die();
 } ; 

add_action( 'wp_ajax_ajax_load_more', 'ajax_load_more_posts' );
add_action( 'wp_ajax_nopriv_ajax_load_more', 'ajax_load_more_posts' );