On my website i made ajax taxonomy filter which is working fine with dropdown select, but i need buttons instead of dropdown. When i am editing code to buttons, filter isnt working, it shows mainc category posts. Please anyone help me Heres my code
<form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="filter">
<?php
if( $terms = get_terms( array( 'taxonomy' => 'roomcat', 'orderby' => 'name' ) ) ) :
echo '<select name="categoryfilter"><option value="">Select category...</option>';
foreach ( $terms as $term ) :
echo '<option value="' . $term->term_id . '"/>' . $term->name . '</option>'; // ID of the category as the value of an option
endforeach;
echo '</select>';
endif;
?>
<button>Apply filter</button>
<input type="hidden" name="action" value="myfilter">
</form>
<div id="response">
</div>
This is Jquery :
<script>
jQuery(function($){
$('#filter').submit(function(){
var filter = $('#filter');
$.ajax({
url:filter.attr('action'),
data:filter.serialize(), // form data
type:filter.attr('method'), // POST
beforeSend:function(xhr){
filter.find('button').text('Processing...'); // changing the button label
},
success:function(data){
filter.find('button').text('Apply filter'); // changing the button label back
$('#response').html(data); // insert data
}
});
return false;
});
});
</script>
This is function
add_action('wp_ajax_myfilter', 'misha_filter_function'); // wp_ajax_{ACTION HERE}
add_action('wp_ajax_nopriv_myfilter', 'misha_filter_function');
function misha_filter_function(){
$args = array(
'orderby' => 'date', // we will sort posts by date
'order' => $_POST['date'] // ASC or DESC
);
// for taxonomies / categories
if( isset( $_POST['categoryfilter'] ) )
$args['tax_query'] = array(
array(
'taxonomy' => 'roomcat',
'field' => 'id',
'terms' => $_POST['categoryfilter']
)
);
$query = new WP_Query( $args );
echo '<section class="section sec">
<div class="section-content relative">
<div class="row">';
if( $query->have_posts() ) :
while( $query->have_posts() ): $query->the_post();
echo '
<div class="col medium-12 small-12 large-6">
<div class="row row-collapse rooms-box box-shadow-2">
<div class="col medium-7 small-12 large-12">
<img class="rooms-img" src="';
echo the_field('rooms_image').
'"/>
</div>
<div class="col medium-7 small-12 large-12">
<div class="rooms">
<h2>'
. $query->post->post_title .
'</h2>
<p style="padding:0px 40px 0px 40px">
<img class="rooms-divider" src=".png"/> '
. $query->post->rooms_description_1 .
'</p>
<p style="padding:0px 40px 0px 40px"><img class="rooms-divider" src=".png"/>'
. $query->post->rooms_description_2 .
'</p>
<p style="padding:0px 40px 0px 40px"><img class="rooms-divider" src=".png"/>'
. $query->post->rooms_description_3 .
'</p>
<div class="but">
<a href="';
echo the_permalink() .
'"><button class="button white ab-info">გაიგე მეტი</button></a>
<a href="#"><button class="button secondary brochure">დაჯავშნე</button></a>
</div>
</div>
</div>
<div class="is-border" style="border-width:1px 1px 1px 1px;margin:15px 5px 5px 30px;"></div>
</div>
</div>';
endwhile;
wp_reset_postdata();
else :
echo 'No posts found';
endif;
echo
'</div>
</div>
</section>';
die();
}
When i'm editing i am making this changes
<form action="<?php echo site_url() ?>/wp-admin/admin-ajax.php" method="POST" id="filter">
<?php
if( $terms = get_terms( array( 'taxonomy' => 'roomcat', 'orderby' => 'name' ) ) ) :
echo '<div name="categoryfilter">';
foreach ( $terms as $term ) :
echo '<button value="' . $term->term_id . '"/>' . $term->name . '</button>'; // ID of the category as the value of an option
endforeach;
echo '</button>';
endif;
?>
<input type="hidden" name="action" value="myfilter">
</form>