使用AJAX过滤自定义帖子

时间:2017-11-02 作者:Marcelo Henriques Cortez

我查了其他问题,在谷歌上搜索。。。什么都没有。

我需要根据所选值从自定义帖子类型中筛选帖子。

我在网站的另一部分使用Ajax,一切正常。我试图遵循相同的逻辑,但每次我更改select选项,而不是加载帖子,我都会得到一个“0”。

控制台上没有错误,我找不到哪里出错了。

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>

1 个回复
最合适的回答,由SO网友:Marcelo Henriques Cortez 整理而成

正如@mmm所指出的,我只需要更改“html()”的“append()”。以及在“action”部分使用“-”而不是“\\u1”。

我让他把它贴出来作为答案,这样我就可以结束这个问题了,但我猜他没有看到。

因此,我的最终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;
    }
   });
 });

结束