web-dev-qa-db-ja.com

Ajaxを使ったカスタム投稿のフィルタリング

私は他の質問を調べ、Googleで検索しました...そして何も得られませんでした。

選択した値に基づいてカスタム投稿タイプから投稿をフィルタリングする必要があります。

私はAjaxを使っているサイトの別の部分を持っていて、すべてがうまく機能しています。私は同じ論理に従おうとしました、しかし私がポストをロードする代わりに選択オプションを変えるたびに、私は '0'を得ます。

コンソールにエラーはなく、どこで問題が発生しているのかわかりません。

これが私の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.

これが私の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;
        }
    });
});

これは私がコンテンツを表示しようとしているページです： 

<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>
custom-post-typesajaxselect
3
Marcelo Henriques Cortez

@ mmmが指摘したように、私はちょうど 'html（）'の 'append（）'を変更する必要がありました。そして、 'action'部分で '_'の代わりに ' - 'を使用しています。

私は彼にそれを答えとして投稿するように頼んだので質問を閉じることができたが、私は彼が見なかったと思います。

したがって、最後の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").html(response);
        //return false;
    }
   });
 });
0
Marcelo Henriques Cortez