1

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

1
  • 1
    Jamie, please take a look at How to Ask and the editor buttons when writing questions. File an edit and show what you got (in code). No one is able to help you in the current state.
    – kaiser
    Oct 14, 2014 at 11:32

1 Answer 1

2

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.

1
  • Hi thanks for your reply some great advice and it has definately got me going in the right direction. Much appreciated.
    – Jamie Gill
    Oct 15, 2014 at 7:38

Your Answer

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

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