i am attempt to filter posts by an cascade dropdown classes.
However when i choose an choice of the cascade, he displaying all of the posts.
How am i able to filter ONLY posts by way of the chosen choice?
That is my construction:
Capabilities.php
perform ajax_filter_posts_scripts() {
// Enqueue script
wp_register_script('afp_script', get_template_directory_uri() . '/belongings/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 confirm AJAX request
'afp_ajax_url' => admin_url( 'admin-ajax.php' ),
)
);
}
add_action('wp_enqueue_scripts', 'ajax_filter_posts_scripts', 100);
// Script for getting posts
perform ajax_filter_get_posts( $taxonomy ) {
// Confirm nonce
if( !isset( $_POST['afp_nonce'] ) || !wp_verify_nonce( $_POST['afp_nonce'], 'afp_nonce' ) )
die('Permission denied');
$taxonomy = $_POST['taxonomy'];
// WP Question
$args = array(
'exclude' => '1,2,4,5,7,8,9,10,11,12',
'post_type' => 'put up',
'nopaging' => true, // present all posts in a single go
);
echo $taxonomy;
// If taxonomy just isn't set, take away key from array and get all posts
if( !$taxonomy ) {
unset( $args['tag'] );
}
$question = new WP_Query( $args );
if ( $query->have_posts() ) : whereas ( $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');
That is my script
jQuery(doc).prepared(perform(jQuery) {
jQuery('.post-tags choose').on('change', perform(occasion) {
console.log('mudou');
// Forestall default motion - opening tag web page
if (occasion.preventDefault) {
occasion.preventDefault();
} else {
occasion.returnValue = false;
}
// Get tag slug from title attirbute
var selecetd_taxonomy = jQuery(this).attr('title');
// After person click on on tag, fade out checklist of posts
jQuery('.tagged-posts').fadeOut();
knowledge = {
motion: 'filter_posts', // perform to execute
afp_nonce: afp_vars.afp_nonce, // wp_nonce
taxonomy: selecetd_taxonomy, // chosen tag
};
jQuery.put up( afp_vars.afp_ajax_url, knowledge, perform(response) {
if( response ) {
// Show posts on web page
jQuery('.tagged-posts').html( response );
// Restore div visibility
jQuery('.tagged-posts').fadeIn();
};
});
});
});
And that is my construction web page
<div id="ajax-cases">
<?php
// WP Question
$args = array(
'post_type' => 'put up',
'exclude' => '1,2,4,5,7,8,9,10,11',
'post_status' => 'publish',
'nopaging' => true, // present all posts in a single go
);
$question = new WP_Query( $args );
$tax = 'class';
$phrases = get_terms( $tax, $args);
$depend = depend( $phrases );
if ( $depend > 0 ): ?>
<div class="post-tags">
<h2>Busque pelo tipo de Trabalho</h2>
<?php
echo '<choose>';
foreach ( $phrases as $time period ) {
$term_link = get_term_link( $time period, $tax );
echo '<choice worth="' . $term_link . '" class="tax-filter">' . $term->identify . '</choice> ';
}
echo '</choose>';
?>
</div>
<?php endif ;?>
<div class="tagged-posts">
// right here should be present the posts chosen trough the class choice
</div>