Display post content from category name using ajax

Question

I'd like to display categories as buttons.

When I click the button I'd like to display a list of the post in that category

The post have a title, thumbnail image, content(text)

In the list of posts I'd like to display the title, image, content and maybe the date.

I'd like to display the post without page reload using ajax.

I think I'm mostly there but I can't display all the content from the posts.

Displaying categories:

    <ul>
          <?php

            $cat_args = array(
              'orderby'     => 'name',
              'order'       => 'ASC',
              'hide_empty'  => 1
            );


            $cats = get_categories($cat_args);

            foreach($cats as $cat){
              echo '<li><a href="#" data-slug="' . $cat->term_id . '" class="js-category-button">' . $cat->name . '</a></li>';
            }
          ?>
    </ul>

The jQuery is in a seperate file.

    $atj('.js-category-button').on('click', function(e){
      e.preventDefault();
      var catID = $atj(this).data('slug');
      var ajaxurl = 'http://my-site.co.uk/wp-admin/admin-ajax.php';
        $atj.ajax({
            type: 'POST',
            url: ajaxurl,
            crossDomain : true,
            dataType: 'html',
            data: {"action": "load-filter", cat: catID },
            success: function(response) {
                $atj(".the-news").append(response);
                return false;
            }
        });
    })

The php script is in functions.php

    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 () {

      global $post;

      $cat_id = $_POST[ 'cat' ];

      $args = array (
        'cat' => $cat_id,
        'posts_per_page' => 3,
        'order' => 'ASC'
      );


      $cat_query = new WP_Query($args);

      if($cat_query->have_posts()) :
        while($cat_query->have_posts()) :
          $cat_query->the_post();


        $response = '<div class="the-post">';
        $response .= '<h1 class="the-title">';
        $response .= '<a href="#">'. get_the_title() .'</a>';
        $response .= '</h1>';
        $response .= apply_filters( 'the_content', get_the_content() );
        $response .= '</div>';


        echo $response;

        endwhile; 

        endif; 

        wp_reset_postdata(); 

        die(1); 
    }    

With the code as it is I have the categories displaying as buttons. If I click them it displays the post title but not the content

How can I display the post content and post thumbnail and date.

Answer 1

    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 () {

          global $post;

          $cat_id = $_POST[ 'cat' ];

          $args = array (
            'cat' => $cat_id,
            'posts_per_page' => 3,
            'order' => 'ASC'
          );


          $cat_query = new WP_Query($args);

          if($cat_query->have_posts()) :
            while($cat_query->have_posts()) :
              $cat_query->the_post();


            $response = '<div class="the-post">';
            $response .= '<h1 class="the-title">';
            $response .= '<a href="#">'. get_the_title() .'</a>';
            $response .= '</h1>';
            $response .= apply_filters( 'the_content', get_the_content() );
             $response .= '<a href="#">'. the_post_thumbnail() .'</a>';
            $response .= '</div>';


            echo $response;

            endwhile; 

            endif; 

            wp_reset_postdata(); 

            die(1); 
        }



<script>
jQuery(document).ready(function () {
 jQuery('.js-category-button').on('click', function(e){
  e.preventDefault();
  var catID = jQuery(this).data('slug');
  var ajaxurl = 'http://localhost/wordpress/wp-admin/admin-ajax.php';
    jQuery.ajax({
        type: 'POST',
        url: ajaxurl,
        crossDomain : true,
        dataType: 'html',
        data: {"action": "load-filter", cat: catID },
        beforeSend: function () {
            jQuery(".the-news").html('<p></p>')
        },
        success: function(response) {
            jQuery(".the-news").append(response);
            return false;
        }
    });
})

}); 
</script>



<ul>
      <?php

        $cat_args = array(
          'orderby'     => 'name',
          'order'       => 'ASC',
          'hide_empty'  => 1
        );


        $cats = get_categories($cat_args);

        foreach($cats as $cat){
          echo '<li><a href="#" data-slug="' . $cat->term_id . '" class="js-category-button">' . $cat->name . '</a></li>';
        }

      ?>
      <div class="the-news">

    </div>
</ul>