Filter posts by categories ajax is showing all the posts

Question

i’m try to filter posts by an cascade dropdown categories.
But when i select an option of the cascade, he showing all the posts.
How can i filter ONLY posts through the selected option?

This is my structure:

Functions.php

    function ajax_filter_posts_scripts() {
  // Enqueue script
  wp_register_script('afp_script', get_template_directory_uri() . '/assets/js/ajax-filter-posts.js', false, null, false);
  wp_enqueue_script('afp_script');

  wp_localize_script( 'afp_script', 'afp_vars', array(
        'afp_nonce' => wp_create_nonce( 'afp_nonce' ), // Create nonce which we later will use to verify AJAX request
        'afp_ajax_url' => admin_url( 'admin-ajax.php' ),
      )
  );
}
add_action('wp_enqueue_scripts', 'ajax_filter_posts_scripts', 100);

// Script for getting posts
function ajax_filter_get_posts( $taxonomy ) {

  // Verify nonce
  if( !isset( $_POST['afp_nonce'] ) || !wp_verify_nonce( $_POST['afp_nonce'], 'afp_nonce' ) )
    die('Permission denied');

  $taxonomy = $_POST['taxonomy'];

  // WP Query
    $args = array(
    'exclude' => '1,2,4,5,7,8,9,10,11,12',
    'post_type' => 'post',
    'nopaging' => true, // show all posts in one go
    );
  echo $taxonomy;
  // If taxonomy is not set, remove key from array and get all posts
  if( !$taxonomy ) {
    unset( $args['tag'] );
  }

  $query = new WP_Query( $args );

  if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>
      <div class="col-md-4">
        <div class="img-thumb">
            <a href="<?php the_field('link_do_case'); ?>">
                <?php the_post_thumbnail(); ?>      
            </a>                                                                    
        </div>
        <small><?php the_title(); ?></small>
    </div>

  <?php endwhile; ?>
  <?php else: ?>
    <h2>Case não encontrado</h2>
  <?php endif;

  die();
}

add_action('wp_ajax_filter_posts', 'ajax_filter_get_posts');
add_action('wp_ajax_nopriv_filter_posts', 'ajax_filter_get_posts');

This is my script

jQuery(document).ready(function(jQuery) {
    jQuery('.post-tags select').on('change', function(event) {
        console.log('mudou');
        // Prevent default action - opening tag page
        if (event.preventDefault) {
            event.preventDefault();
        } else {
            event.returnValue = false;
        }

        // Get tag slug from title attirbute
        var selecetd_taxonomy = jQuery(this).attr('title');

        // After user click on tag, fade out list of posts
        jQuery('.tagged-posts').fadeOut();

        data = {
            action: 'filter_posts', // function to execute
            afp_nonce: afp_vars.afp_nonce, // wp_nonce
            taxonomy: selecetd_taxonomy, // selected tag
            };

        jQuery.post( afp_vars.afp_ajax_url, data, function(response) {

            if( response ) {
                // Display posts on page
                jQuery('.tagged-posts').html( response );
                // Restore div visibility
                jQuery('.tagged-posts').fadeIn();
            };
        });
    });
});

And this is my structure page

<div id="ajax-cases">
<?php
    // WP Query
    $args = array(
    'post_type' => 'post',
    'exclude' => '1,2,4,5,7,8,9,10,11',
    'post_status' => 'publish',
    'nopaging' => true, // show all posts in one go
    );
   $query = new WP_Query( $args );
   $tax = 'category';
   $terms = get_terms( $tax, $args);
   $count = count( $terms );

    if ( $count > 0 ): ?>
        <div class="post-tags">
            <h2>Busque pelo tipo de Trabalho</h2>
            <?php
            echo '<select>';
                foreach ( $terms as $term ) {
                    $term_link = get_term_link( $term, $tax ); 
                    echo '<option value="' . $term_link . '" class="tax-filter">' . $term->name . '</option> ';

                }
            echo '</select>';
             ?>
        </div>
    <?php endif ;?>
    <div class="tagged-posts">
      // here must be show the posts selected trough the category option
    </div>              

0
, Julio Rodrigues 7 months 0 Answers 92 views 0

Leave an answer