AJAX filter posts by year

Question

So I have a HTML select form which allows users to choose years such as 2017 , 2018 etc

Hence, what i want this to achieve is when user selects 2017 , the posts from 2017 will be loaded on the page.

My process thought was to use AJAX along with WP_QUERY to accomplish this.

However, the error i am receiving is ERROR 400 BAD REQUEST.

Thus any help given will be greatly appreciated.

Front end

<form action="<?php echo site_url()?>/wp-admin/admin-ajax.php" method="POST" id="filter>
   <select id="year"></select>
</form>

JS ajax request

$.ajax({
    url : filter.attr('action') ,
    data : filter.serialize() ,
    type : filter.attr('method') ,
    success : function (response)
    {
        console.log(response)
    } ,
    error : function (request , status , error)
    {
        console.log(request.responseText)
        console.log(error)
    } ,
    headers: {
        'Content-type': 'application/x-www-form-urlencoded'
    } ,
    datatype : 'xml'
}).done(function () {
    console.log('ajax completed')
})

functions.php

function filter_post_asb
{
    $args = array(
    'cat' => 43 ,
    'year' => $_POST['year']
    );
    $query = new WP_Query($args);
    if ( $query -> have_posts()) :
    ?>
    <div class="container">
    <select id="year"></select>
    <ul class="slides">
        <?php while($query -> have_posts()) : $query -> the_post(); ?>
        <li>
            <img src="<?php bloginfo('template_url')?>/images/logo.png" >
            <?php the_content(); ?>
            <h2><?php the_permalink();?></h2>
            <h4><?php the_title();?></h4>
        </li>
        <li>
            <?php the_post_thumbnail();?>
        </li>
        <?php endwhile ; ?>
        <?php wp_reset_postdata();?>
    </ul>
</div>
<?php
endif;
}

add_action('wp_ajax_filter', 'filter_post_asb');
add_action('wp_ajax_nopriv_filter', 'filter_post_asb');

Once again, thank you very much for all the input given.

Answer 1

Try by change appropriate code:

Front end

<form action="<?php echo site_url()?>/wp-admin/admin-ajax.php" method="POST" id="filter>
   <select name="year"></select>
   <input type="hidden" name="action" value="filter" />
</form>

JS ajax request

$.ajax({
    url : filter.attr('action') ,
    data : filter.serialize() ,
    type : filter.attr('method') ,
    success : function (response)
    {
        console.log(response)
    },
    error : function (request , status , error)
    {
        console.log(request.responseText)
        console.log(error)
    }
}).done(function () {
    console.log('ajax completed')
})

functions.php

function filter_post_asb {

    ob_start()

    $args = array(
       'cat' => 43,
       'year' => $_POST['year']
    );
    $query = new WP_Query($args);

    if ( $query -> have_posts()) : ?>
    <div class="container">
    <select id="year"></select>
    <ul class="slides">
        <?php while($query -> have_posts()) : $query -> the_post(); ?>
        <li>
            <img src="<?php bloginfo('template_url')?>/images/logo.png" >
            <?php the_content(); ?>
            <h2><?php the_permalink();?></h2>
            <h4><?php the_title();?></h4>
        </li>
        <li>
            <?php the_post_thumbnail();?>
        </li>
        <?php endwhile ; ?>
        <?php wp_reset_postdata();?>
    </ul>
   </div>
   <?php
   endif;
   echo ob_get_clean();

   // OR
   // $html = ob_get_clean();
   // echo json_encode( array( 'html' => $html ) );
   exit;
}

add_action('wp_ajax_filter', 'filter_post_asb');
add_action('wp_ajax_nopriv_filter', 'filter_post_asb');