web-dev-qa-db-fra.com

Filtrer les publications personnalisées avec Ajax

J'ai regardé dans d'autres questions, cherché sur Google ... et rien obtenu.

Je dois filtrer les publications à partir d'un type de publication personnalisé en fonction de la valeur sélectionnée.

J'ai une autre partie du site où j'utilise Ajax et tout fonctionne bien. J'ai essayé de suivre la même logique, mais chaque fois que je modifie l'option de sélection, au lieu de charger les messages, je reçois un "0".

Il n'y a pas d'erreur sur la console et je ne trouve pas où je me trompe.

Voici mon 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.

Voici mon bit jQuery/Ajax:

$("#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;
        }
    });
});

Voici la page que j'essaie de montrer le contenu:

<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>

Comme l'a souligné @mmm, je devais simplement changer le paramètre 'append ()' pour 'html ()'. Et l'utilisation de "-" au lieu de "_" dans la partie "action".

Je lui ai demandé de l'afficher en guise de réponse afin de pouvoir clore la question, mais je suppose qu'il ne l'a pas vue.

Donc, mon code final AJAX est:

$("#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;
    }
   });
 });
0