Using ajax with paging and a custom sub-query

I have a page that uses three queries to retrieve a variety of content. One of those queries grabs posts that are related to the topic of the page. Since these posts can be of all sorts and related through a variety of methods (various magic fields defined values, their category, etc.) I am using a custom query to grab them (something where I build some args and pass them to WP_Query() like so: $collected_child_posts = new WP_Query($args);

Currently I return 5 results at a time (in my args I have 'posts_per_page' => 5) and I want to page those results using ajax so that only that block of results updates when you click a MORE POSTS link.

Read More

I implemented this by adding a url to the MORE POSTS button that looks like ?paged=n and then having that retrieved via ajax. Problem is I get the entire page back (including the desired posts) when I only want the posts themselves.

Any ideas on the best way to retrieve just those posts from the subquery without returning the entire page?

Thanks!

Related posts

Leave a Reply

1 comment

  1. Two options-

    load a page fragment using jQuery’s load method (see Loading Page Fragments),

    or create your own ajax function to load posts and return it in whatever markup you wish:

    add_action('wp_ajax_my_ajax_get_posts', 'my_ajax_callback');
    add_action('wp_ajax_nopriv_my_ajax_get_posts', 'my_ajax_callback');
    function my_ajax_callback() {
        $args = $_POST['myargs'];
        $collected_child_posts = new WP_Query($args);
        echo 'some stuff';
        die();
    }
    

    pass the admin-ajax url to your javascript via wp_localize_script, or put it directly in your template via admin_url('admin-ajax.php');

    then call admin-ajax.php and pass your ajax action:

    jQuery(document).ready(function($){
        $.post(your_ajaxurl, {
            action: 'my_ajax_get_posts',
            myargs: args
        },
        function(data) {
            alert(data);
        });
    });
    

    the first method is obviously simpler, but the second is easier on the server since a lot less of WP is loaded to execute an ajax call this way, plus less data is getting sent.