wp_query with ajax

Question

I am trying to filter posts by year using WP_QUERY with AJAX And the current builder i am using is DIVI(for front end).

Result

Everything loads fine and i am facing one final roadblock that is when I filter the posts using the select dropdown, the result that it throws back include the html tags.

My results can be found in this attachment.

Expected Results

I want to load the posts content without this html tags.

What I have tried

I have tried using

$content = apply_filters( 'the_content' , wp_strip_all_tags(get_the_content())); 

but it still spits out the html tag.

This is my full code for this query

functions.php

// to connect to ajax
function asb_blog_clone()
{
  if (is_page(7526)) {
    wp_enqueue_script('asb_blog_clone.js' ,get_template_directory_uri() . '/js/asb_blog_clone.js' , array('jquery') , false);
   }
}
add_action('wp_enqueue_scripts' , asb_blog_clone);

// to load the result from ajax
function filter_post_asb_clone()
{
    // ob_start();
    $args = array(
        'year' => $_POST['year'] ,
        'cat' => array(42 , 43)
    );
    $query = new WP_Query($args);
    if ( $query -> have_posts()) :
?>
    <div class="container">
        <ul class="display-posts-listing">
            <?php while($query -> have_posts()) : $query -> the_post(); ?>
            <li class="listing-item">
                <h4><?php the_title();?></h4>
                <?php
                    $content = apply_filters( 'the_content' , get_the_content());
                    echo $content;
                ?>
                <?php the_post_thumbnail();?>
            </li>
            <?php endwhile ; ?>
            <?php wp_reset_postdata();?>
        </ul>
    </div>
<?php
    endif;
    // echo ob_get_clean();
    return $query;
    exit;
}
add_action('wp_ajax_year_selector', 'filter_post_asb_clone');
add_action('wp_ajax_nopriv_year_selector', 'filter_post_asb_clone');

asb_blog_clone.js [To send Ajax Request]

jQuery(document).ready(function($)
{
    // add css for select
    const start = 2017;
    const year = $('#year')
    displayYear(start)
    setValueToOption()
    year.change(function(){
        let $year = $('#year option:selected').text()
        $.ajax({
            url:'http://uat.asb.edu.my/wp-admin/admin-ajax.php' , //#endregion
            type : 'POST' , //#endregion
            data : 'action=year_selector&year=' + $year , //#endregion
            success : function (results) {
                // $('.load-result').html(results)
                $('.display-posts-listing').children().empty();
                $(results).addClass('.listing-item')
                $('.display-posts-listing').append(results)
            }
        })
    })
    year.css({
        'background-color' : '#0D3A7C' ,
        'color' : '#fff',
        'width' : '25%'
    })
    year.mouseenter(function(){
        year.css('background-color' , '#AA1E46')
    })
    year.mouseleave(function(){
        year.css('background-color' , '#0D3A7C')
    })
})

Kindly advise on this please.

Much appreciated and thank you for your time.

Answer 1

So, i found a work around for this . I just display the excerpt() and then I link them to the permalink() of this post.

// to load the result from ajax

function filter_post_asb_clone()
{
    // ob_start();
    $args = array(
        'year' => $_POST['year'] ,
        'cat' => array(42 , 43)
    );
    $query = new WP_Query($args);
    if ( $query -> have_posts()) :
?>
    <div class="container">
        <ul class="display-posts-listing">
            <?php while($query -> have_posts()) : $query -> the_post(); ?>
            <a href="<?php echo the_permalink(); ?>">
                <li class="listing-item">
                <h4><?php the_title();?></h4>
                <?php
                    echo the_excerpt();
                ?>
                <?php the_post_thumbnail();?>
               </li>
            </a>
            <?php endwhile ; ?>
            <?php wp_reset_postdata();?>
        </ul>
    </div>
<?php
    endif;
    exit;
}

Thank you very much