Category Ajax call

Question

I am following this post to get an ajax post filter via category to work 'Using ajax on categories and wordpress loops'.

I think I have added everything in correctly as follows in my template I have:

My Category list items :-

<ul id="category-menu">
    <?php foreach ( $categories as $cat ) { ?>
    <li id="cat-<?php echo $cat->term_id; ?>"><a class="<?php echo $cat->slug; ?> ajax" onclick="cat_ajax_get('<?php echo $cat->term_id; ?>');" href="#"><?php echo $cat->name; ?></a></li>

    <?php } ?>
</ul>

The content Divs (meant for the ajax content) :-

<div class="job-holder">
    <div id="loading-animation" style="display: none;"><img src="<?php echo admin_url ( 'images/loading-publish.gif' ); ?>"/></div>
    <div id="category-post-content"></div>
</div>

The Ajax call :-

<script>
 function cat_ajax_get(catID) {
     jQuery("a.ajax").removeClass("current");
     jQuery("a.ajax").addClass("current"); //adds class current to the category menu item being displayed so you can style it with css
     jQuery("#loading-animation-2").show();
     var ajaxurl = '<?php admin_url( 'admin-ajax.php' ); ?>';
     jQuery.ajax({
         type: 'POST',
         url: ajaxurl,
         data: {"action": "load-filter", cat: catID },
         success: function(response) {
             jQuery("#category-post-content").html(response);
             jQuery("#loading-animation").hide();
             return false;
      }
    });
}
</script>

Then in Functions.php I have :-

add_action( 'wp_ajax_nopriv_load-filter', 'prefix_load_cat_posts' );
add_action( 'wp_ajax_load-filter', 'prefix_load_cat_posts' );
function prefix_load_cat_posts () {
    $cat_id = $_POST[ 'cat' ];
         $args = array (
        'cat' => $cat_id,
        'posts_per_page' => 10,
        'order' => 'DESC'

    );

    $posts = get_posts( $args );

    ob_start ();

    foreach ( $posts as $post ) {
    setup_postdata( $post ); ?>

    <div id="post-<?php echo $post->ID; ?> <?php post_class(); ?>">
        <hi class="posttitle"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></hi>

        <div id="post-content">
        <?php the_excerpt(); ?>

        </div>
   </div>

   <?php } wp_reset_postdata();

   $response = ob_get_contents();
   ob_end_clean();

   echo $response;
   die(1);
   }

The ajax call works but it pulls in the whole page again into the #category-post-content div. All I want is the posts to pull in within the category selected.

Any information on how to get this working would be greatly appreciated.

Thanks in advance J

Answer 1

You could try to use the .children method to filter through your response - let's say the posts are comming in containers with a particular selector on them - say, you add class="mypost" on the divs when you build the response -, then you can do something like this in your success method:

// ...
jQuery("#category-post-content").html(jQuery(response).children('.mypost'));
// ...

An alternative would be to do a foreach loop through the $post and build an array of $postElements, then echo json_encode($postElements); in your PHP functions file and parse it in the success method, build the HTML output in there.

// ...
jQuery("#category-post-content").html(''); // Clean up old content
for (i in response) {
    // Build the html string for each response[i] here
    var postElement = '<div id="post-' + response[i].id + '" class="' + response[i].classes '">'
        + .........;
    // and then add it to your container
    jQuery("#category-post-content").append(postElement);
}
// ...

It all depends how you want to approach this problem, but it's a matter of best practice to not return HTML code directly in the server's response to an AJAX request.