3

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>
  • in the JavaScript code, you call a action with "_" instead of "-" : "action" : "load-filter", – mmm Nov 2 '17 at 16:04
  • The function is load_filter. The action is load_filter. I can't see whats the problem with that oO – Marcelo Henriques Cortez Nov 2 '17 at 16:06
  • the function name is internal to PHP, the name to call in AJAX is defined by the action name wp_ajax_load-filter and there is load-filter here – mmm Nov 2 '17 at 16:13
  • Oh, ok, my bad. I changed that and it's working. Any tip so the posts won't keep stacking? Like, on each select, clear the last post list? Also, can you post that as an answer so I can accept it? – Marcelo Henriques Cortez Nov 2 '17 at 16:17
  • to not stack, don't use append but html(response) api.jquery.com/html – mmm Nov 2 '17 at 17:28
0

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;
    }
   });
 });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.