Filtering custom posts with Ajax

Question

I looked in other questions, searched on Google... And got nothing.

I need to filter the posts from a custom post type based on the selected value.

I have another part of the site where I use Ajax and everything works fine. I tried to follow the same logic, but everytime I change the select option, instead of loading the posts, I get a '0'.

There is no error on the console and I can't find where I'm getting it wrong.

Here is my functions.php:

add_action( 'wp_ajax_load-filter', 'load_filter' );
add_action( 'wp_ajax_nopriv_load-filter', 'load_filter' );
function load_filter() {
$filterValue = esc_sql( $_POST );
if ( ! wp_verify_nonce( $filterValue['nonce'], 'ds_nonce_security_key' ) ) {
    wp_die( 'Ocorreu um erro. Por favor, tente novamente' );
}
if ( ! isset( $filterValue['opt_selected'] ) || empty( $filterValue['opt_selected'] ) ) {
    wp_die( 'Nenhum termo foi escolhido' );
}
if ( $filterValue['opt_selected'] == 'mais-recente'){
    $adsUser = array(
        'post_type'  => 'cadastro_anuncios',
        'author' => $curauthID,
        'orderBy' => 'post_date',
        'order' => 'DESC',
    );
} else if ( $filterValue['opt_selected'] == 'mais-antigo'){
    $adsUser = array(
        'post_type'  => 'cadastro_anuncios',
        'author' => $curauthID,
        'orderBy' => 'post_date',
        'order' => 'ASC',
    );
} else if ( $filterValue['opt_selected'] == 'mais-barato'){
    $adsUser = array(
        'post_type'  => 'cadastro_anuncios',
        'author' => $curauthID,
        'metaKey' => 'preco_anuncio',
        'orderBy' => 'meta_value',
        'order' => 'ASC',
    );
} else if ( $filterValue['opt_selected'] == 'mais-caro'){
    $adsUser = array(
        'post_type'  => 'cadastro_anuncios',
        'author' => $curauthID,
        'metaKey' => 'preco_anuncio',
        'orderBy' => 'meta_value',
        'order' => 'DESC',
    );
}else{}


$queryAdsUser = new WP_Query( $adsUser );
if ( $queryAdsUser->have_posts() ) : while ( $queryAdsUser->have_posts() ) : $queryAdsUser->the_post();
?>
<a href="<?php echo the_permalink(); ?>"><p><?php echo the_title(); ?></p></a>
<?php
endwhile; 
wp_reset_postdata();
else :
?>
<?php 
endif;

wp_die(); //stop function once you've echoed (returned) what you need.

Here is my jQuery/Ajax bit:

$("#opt_filter").change(function () {
    var opt_filter = $("#opt_filter").val();
    $.ajax({
        type: "POST",
        url: clocal.ajaxurl,
        dataType: "json",
        data: {
            'action': 'load_filter',
            'opt_selected': opt_filter,
        },
        success: function(response) {
            $("#list-of-posts").append(response);
            //return false;
        }
    });
});

Here is the page I'm trying to show the content:

<select id="opt_filter" class="opt_filter" name="opt_filter">
                    <option name="mais-recente" value="mais-recente"> Mais recente </option>
                    <option name="mais-antigo" value="mais-antigo"> Mais antigo </option>
                    <option name="mais-barato" value="mais-barato"> Mais barato </option>
                    <option name="mais-caro" value="mais-caro"> Mais caro </option>
                </select>

                <div id="list-of-posts"></div>

Answer 1

As pointed by @mmm, I just needed to change the 'append()' for 'html()'. And the use of '-' instead of '_' in the 'action' part.

I asked him to post it as an answer so I could close the question, but I guess he didn't see.

So, my final AJAX code is:

$("#opt_filter").change(function () {
var opt_filter = $("#opt_filter").val();
$.ajax({
    type: "POST",
    url: clocal.ajaxurl,
    dataType: "json",
    data: {
        'action': 'load-filter',
        'opt_selected': opt_filter,
    },
    success: function(response) {
        $("#list-of-posts").html(response);
        //return false;
    }
   });
 });