1

I have custom query which is $query. The input is based on form input. The query has already run on a page, but after that I'd like to run it again without a page reload, so with AJAX (when the users selects a tab (Bootstrap)).

The thing is that I need to change the query var posts_per_page to -1.

The code to do something when the tab is selected is:

$('#myTab').on('shown', function () {
   // Do stuff here
})

Now within that function I can do

jQuery.ajax(
    {  
        type: 'POST',  
        url: ajaxurl, // example.com/wp-admin/admin-ajax.php is defined in my js file
        data: 
        {  
            action: 'the_function_here',
            ajaxnonce: YTajax.ajaxnonce, // Also defined
        },
        success: function(data, textStatus, XMLHttpRequest)
        {  
            jQuery('#bodyForOutput').html(data);  
        },  
        error: function(MLHttpRequest, textStatus, errorThrown)
        {  
            alert(errorThrown);
        }
    });

But I don't really know how to make use of $query which is already defined. I only need to alter the posts_per_page. Can I do this with set_query_var? Or is that only usable for the main loop?

2
  • Just to be clear - you're trying to do an ajax request, which returns essentially the same results as the original request except that you want to change posts_per_page to -1 - is that correct?
    – Andy Adams
    Nov 25, 2013 at 17:25
  • That's correct.
    – eskimo
    Nov 25, 2013 at 17:42

1 Answer 1

4

You have to note that an ajax request is an entirely new http request, so the $query variable is defined in the page that send the ajax request but will be not set in the page that receive the request.

That means that you have completely recreate the query and not change a param.

That said, you have 2 possibilities:

1: Query is a custom one

If the query is a custom one (you create it using WP_Query) you can write a function that return that query and call it from the page and from the function hooking in the ajax action:

// in functions.php or in plugin
function my_custom_query( $posts_per_page = 10 ) {
  $args = array(
    'posts_per_page' => $posts_per_page,
    // other args here
  ); 
  return new WP_Query( $args );
}

// then inside the page
$query = my_custom_query();
while ( $query->have_posts() ) { $query->the_post();
  // your loop code here
}

// and handling ajax action
add_action('wp_ajax_the_function_here', 'my_ajax_loop');
add_action('wp_ajax_nopriv_the_function_here', 'my_ajax_loop');
function my_ajax_loop() {
   $query = my_custom_query( -1 );
   while ( $query->have_posts() ) { $query->the_post();
     // your loop code here
   }
   die();
}

2: Query is the main query

If you want to replicate the main query changing one or more param, cosider to pass the query vars to the script via wp_localize_script and the pass them via ajax to the function that handle the ajax action, something like:

add_action('wp_enqueue_script', 'add_my_scripts');

function add_my_scripts() {
  // here I'm assuming the javascript file where you have the code you posted
  // is called 'myscript.js' and resides in 'js' subfolder inside theme folder
  wp_enqueue_script('my_script', get_template_directory_uri() . '/js/myscript.js');
  global $wp_query;
  $qv = $wp_query->query;
  wp_localize_script('my_script', 'my_script_data', array('query' => $qv) );
}

After that, in the js file you can:

jQuery.ajax({  
  type: 'POST',  
  url: ajaxurl, // example.com/wp-admin/admin-ajax.php is defined in my js file
  data:  {  
    action: 'the_function_here',
    ajaxnonce: YTajax.ajaxnonce, // Also defined
    query: my_script_data.query // Defined by 'wp_localize_script'
  },
  success: function(data, textStatus, XMLHttpRequest) {  
    jQuery('#bodyForOutput').html(data);  
  },  
  error: function(MLHttpRequest, textStatus, errorThrown) {
    alert(errorThrown);
  }
});

Now you can hande the ajax request in like so:

// and handling ajax action
add_action('wp_ajax_the_function_here', 'my_ajax_loop');
add_action('wp_ajax_nopriv_the_function_here', 'my_ajax_loop');
function my_ajax_loop() {
   $args = (array) filter_var(INPUT_POST, 'query');
   $args['posts_per_page'] = -1;
   $query = new WP_Query($args);
   while ( $query->have_posts() ) { $query->the_post();
     // your loop code here
   }
   die();
}
1
  • Thanks. My query is a custom one so that's option 1. The custom_query function (which is already there) takes several input variables based on the form input. So I'll grab those from the form, and send them along with the posts_per_page.
    – eskimo
    Nov 25, 2013 at 21:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.